如何在 React 组件中有条件地应用类属性？

在 React 中有条件地应用类属性

在 React 中，经常需要根据从父组件传递的值有条件地显示或隐藏元素。这可以通过操作子组件的类属性来实现。

示例：

<TopicNav showBulkActions={this.__hasMultipleSelected} />

__hasMultipleSelected: function() {
  return false; //return true or false depending on data
}

var TopicNav = React.createClass({
  render: function() {
    return (
        <div className="row">
            <div className="col-lg-6">
                <div className={"btn-group pull-right " + (this.props.showBulkActions ? 'show' : 'hidden')}>
                    <button type="button" className="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                      Bulk Actions <span className="caret"></span>
                    </button>
                    <ul className="dropdown-menu" role="menu">
                      <li><a href="#">Merge into New Session</a></li>
                      <li><a href="#">Add to Existing Session</a></li>
                      <li className="divider"></li>
                      <li><a href="#">Delete</a></li>
                    </ul>
                </div>
            </div>
        </div>
        );
      }
    });

说明：

在 React 中有条件地应用类属性的关键是在 className 属性的大括号内使用条件（三元）运算符。在此示例中，如果 this.props.showBulkActions 为 true，则应用显示类，否则应用隐藏类。

注意： 确保大括号位于字符串之外，如上例所示。否则，表达式将被计算为字符串，并且将不会应用所需的类名称。

以上是如何在 React 组件中有条件地应用类属性？的详细内容。更多信息请关注PHP中文网其他相关文章！