javascript-返回将组件和状态混合在一起的React组件

我认为这可能是一种反模式,但是我想在定义组件的类名时同时使用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