标签：reactjs data-structures react-jsx javascript

我认为这可能是一种反模式,但是我想在定义组件的类名时同时使用props和state.这样,我可以分配多个类.

我的模式是：

render: function() {
    return (
    <div className="portrait-speaker default" onClick={this.handleClick}>
        <audio className={this.props.defaultclass} + {this.state.playingclass} ref="player" preload={this.props.preload}>
            <source src={this.props.src} type={this.props.mimeType} />
        </audio>
    </div>
    );
}

这显然是行不通的.将prop和state一起使用以在className中混合不可变和可变数据类型的最佳方法是什么？

解决方法:

“混合”状态和props生成css类没有什么错,但是由于这个原因,您可能会遇到语法错误：

className = {this.props.defaultclass} {this.state.playingclass}

在这里,React只计算大括号内的js,因此“”可能会破坏某些内容.请参阅此修复程序：

render: function() {
    return (
        <div className="portrait-speaker default" onClick={this.handleClick}>
            <audio className={this.props.defaultclass + ' ' + this.state.playingclass} ref="player" preload={this.props.preload}>
                <source src={this.props.src} type={this.props.mimeType} />
            </audio>
        </div>
    );
}

标签：reactjs,data-structures,react-jsx,javascript
来源： https://codeday.me/bug/20191119/2037908.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。