Question

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

这显然不起作用。在props中使用state和className一起混合不可变和可变数据类型的最佳方法是什么？

Answer 1

＆＃34;混合＆＃34;没有错。用于生成css类的state和props，但由于这个原因，您可能会收到语法错误：

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

React仅在这里评估大括号内的js，所以＆＃34; +＆＃34;可能会破坏某些东西。看到这个修复：

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>
    );
}

Answer 2

它通常是一种将className存储在状态中的反模式。而是存储可用于确定渲染中的className的最小数据。

同样classnames是一个很小的库，它合并了classNames并允许条件名称。它非常方便。

var classnames = require('classnames')

// ...

  <audio 
    className={classnames(this.props.defaultclass, {
      /* only has 'is-playing' class when this.state.playing is `true` */
      'is-playing': this.state.playing,
    })} 
    ref="player" 
    preload={this.props.preload}
  >

返回React组件，其中props和state混合在一起

2 个答案: