Wie wende ich Klassenattribute bedingt in Reaktionskomponenten an?

Bedingtes Anwenden von Klassenattributen in React

In React ist es häufig erforderlich, Elemente basierend auf von übergeordneten Komponenten übergebenen Werten bedingt anzuzeigen oder auszublenden . Dies kann durch Bearbeiten der Klassenattribute der untergeordneten Komponente erreicht werden.

Beispiel:

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

Erklärung:

Der Schlüssel zum bedingten Anwenden von Klassenattributen in React liegt in der Verwendung des bedingten (ternären) Operators innerhalb der geschweiften Klammern für die className-Eigenschaft. Wenn in diesem Beispiel this.props.showBulkActions wahr ist, wird die Show-Klasse angewendet, andernfalls wird die Hidden-Klasse angewendet.

Hinweis: Stellen Sie sicher, dass sich die geschweiften Klammern außerhalb der Zeichenfolge befinden. wie im Beispiel oben gezeigt. Andernfalls wird der Ausdruck als String ausgewertet und die gewünschten Klassennamen werden nicht angewendet.

Das obige ist der detaillierte Inhalt vonWie wende ich Klassenattribute bedingt in Reaktionskomponenten an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!