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 중국어 웹사이트의 기타 관련 기사를 참조하세요!