ReactJS 구성 요소에 여러 클래스를 추가하는 방법은 무엇입니까?

ReactJS 구성 요소에 여러 클래스 추가

ReactJS 및 JSX로 작업할 때 여러 클래스를 하나의 구성 요소에 적용해야 하는 상황에 직면할 수 있습니다. 단일 구성 요소. 일반적인 시나리오 중 하나는 요소에 초점을 맞추거나 클릭할 때 조건에 따라 활성 클래스를 추가하는 것입니다.

귀하의 예에서는 다음과 같이 li 요소의 className 특성에 여러 클래스를 추가하려고 합니다.

<li key={index} className={activeClass, data.class, "main-class"}></li>

그러나 이 접근 방식은 공백을 추가하지 않고 문자열만 연결하는 쉼표 연산자를 사용합니다. 여러 클래스를 올바르게 추가하려면 ES6 템플릿 리터럴 기능을 사용해야 합니다.

AccountMainMenu 구성 요소에서 다음과 같이 렌더링 메서드를 수정합니다.

render: function() {
    // ... existing code

    return (
      <div className="acc-header-wrapper clearfix">
        <ul className="acc-btns-container">
          {accountMenuData.map((data, index) => {
            let activeClass = "";

            if (this.state.focused == index) {
              activeClass = "active";
            }

            return (
              <li
                key={index}
                className={`${activeClass} ${data.class} main-class`}
                onClick={this.clicked.bind(self, index)}
              >
                <a href="#" className={data.icon}>
                  {data.name}
                </a>
              </li>
            );
          })}
        </ul>
      </div>
    );
  }

이제 className 속성은 템플릿을 사용합니다. 여러 클래스를 공백으로 연결하는 리터럴입니다. activeClass 및 data.class 변수를 보간하면 원하는 클래스를 조건부로 적용할 수 있습니다.

이 접근 방식을 사용하면 구성 요소의 상태나 속성에 따라 클래스를 동적으로 추가 및 제거할 수 있어 ReactJS에 대한 유연성과 제어력이 향상됩니다. 구성요소입니다.

위 내용은 ReactJS 구성 요소에 여러 클래스를 추가하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!