返回 props 和 state 混合在一起的 React 组件

Question

我认为这可能是一种反模式，但我想在定义组件的 class 名称时一起使用 props 和 state。这样，我可以分配多个 classes.

我的模式是：

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

"mixing" state 和 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>
    );
}

Answer 2

在状态中存储类名通常是一种反模式。而是存储可用于在渲染中确定类名的最少数据。

另外 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}
  >

返回 props 和 state 混合在一起的 React 组件

Returning React component where props and state are mixed together

javascript

data-structures

reactjs

react-jsx