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 の場合は show クラスが適用され、それ以外の場合は非表示クラスが適用されます。

注: 中括弧が文字列の外側にあることを確認してください。上の例に示すように。それ以外の場合、式は文字列として評価され、必要なクラス名は適用されません。

以上がReact コンポーネントでクラス属性を条件付きで適用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。