ReactJS 구성 요소에 여러 클래스를 동적으로 추가하려면 어떻게 해야 합니까?

ReactJS 구성 요소에 여러 클래스를 동적으로 추가

ReactJS로 작업할 때 요소의 className에 여러 클래스를 추가해야 할 수도 있습니다. 기인하다. 잠재적인 오류나 혼란을 피하기 위해 ES6 템플릿 리터럴은 우아한 솔루션을 제공합니다.

이를 달성하려면 템플릿 리터럴을 사용하여 백틱(`)으로 클래스 이름을 묶고 " " 연산자를 사용하여 연결합니다. 예:

const className = `class1 class2 class3`;

귀하의 경우 템플릿 리터럴을 사용하도록 AccountMainMenu 구성 요소의 렌더링 메서드를 수정할 수 있습니다.

render() {
  var self = this;
  // ...

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

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

          const className = `${activeClass} ${data.class} main-class`;

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

이 접근 방식을 사용하면 여러 클래스가 복잡한 문자열 조작이나 잠재적 오류가 필요 없는 className 속성.

위 내용은 ReactJS 구성 요소에 여러 클래스를 동적으로 추가하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!