리액트JS 컴포넌트에 여러 개의 클래스를 추가하는 방법은 다음과 같습니다.

ReactJS와 JSX에 새로운 사람입니다. 아래의 코드에 약간의 문제가 있습니다.

각 li에 className 속성에 여러 클래스를 추가하려고 시도하고 있습니다:

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

내 React 컴포넌트는 다음과 같습니다:

var AccountMainMenu = React.createClass({
  getInitialState: function() {
    return { focused: 0 };
  },
  clicked: function(index) {
    this.setState({ focused: index });
  },
  render: function() {
    var self = this;
    var accountMenuData = [
      {
        name: 내 계정,
        icon: 아이콘 계정
      },
      {
        name: 메시지,
        icon: 아이콘 메시지
      },
      {
        name: 설정,
        icon: 아이콘 설정
      }
    /*{
        name:도움말 및 지원 &nbsp; <span class='font-awesome icon-support'></span>(888) 664.6261,
        listClass:no-mobile last help-support last
      }*/
    ];
    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;
            }
            return (
              <li
                key={index}
                className={activeClass}
                onClick={self.clicked.bind(self, index)}
              >
                <a href=# className={data.icon}>
                  {data.name}
                </a>
              </li>
            );
          })}
        </ul>
      </div>
    );
  }
});
ReactDOM.render(<AccountMainMenu />, document.getElementById(app-container));

답변 1

나는 ES6 템플릿 리터럴을 사용합니다. 예를 들면:

const error = this.state.valid ? '' : 'error'
const classes = `form-control round-lg ${error}`

그리고 그냥 렌더링하면 됩니다:

<input className={classes} />

한 줄 버전:

<input className={`form-control round-lg ${this.state.valid ? '' : 'error'}`} />

답변 2

리액트JS 컴포넌트에 여러 개의 클래스를 추가하는 방법에 대해 알아보겠습니다. 리액트JS는 웹 애플리케이션을 개발하기 위해 사용되는 자바스크립트 라이브러리로, 컴포넌트 기반의 개발 방식을 채택하고 있습니다. 컴포넌트는 재사용 가능한 UI 조각들로 구성되며, 필요한 스타일링과 로직을 포함할 수 있습니다.
컴포넌트에 여러 개의 클래스를 추가하는 방법은 여러 가지가 있습니다. 일반적으로는 `className` 속성을 사용하여 클래스를 추가합니다.
첫 번째 방법은 클래스 이름들을 문자열로 결합하는 것입니다. 여러 개의 클래스를 추가하고자 할 때 클래스 이름을 문자열로 결합하여 `className` 속성에 할당합니다.
```javascript
function MyComponent() {
const classes = ['class1', 'class2', 'class3'].join(' ');
return

여러 개의 클래스를 추가하는 예시

}
```
두 번째 방법은 JavaScript 배열의 스프레드 연산자를 사용하는 것입니다. 배열을 만든 후, 스프레드 연산자를 사용하여 `className` 속성에 전달합니다. 이 방법은 클래스를 동적으로 추가하거나 제거할 때 유용합니다.
```javascript
function MyComponent() {
const classes = ['class1', 'class2', 'class3'];
return

여러 개의 클래스를 추가하는 예시

}
```
세 번째 방법은 JavaScript의 템플릿 리터럴을 사용하는 것입니다. 클래스 이름을 문자열로 결합하는 대신, 템플릿 리터럴 내에서 변수로 클래스 이름을 결합합니다. 이 방법은 가독성과 유지 보수에 좋은 방식입니다.
```javascript
function MyComponent() {
const classes = ['class1', 'class2', 'class3'];
const className = `class-container ${classes.join(' ')}`;
return

여러 개의 클래스를 추가하는 예시

}
```
이와 같이 여러 가지 방법을 사용하여 리액트JS 컴포넌트에 여러 개의 클래스를 추가할 수 있습니다. 이는 컴포넌트를 보다 유연하게 스타일링하고, 다양한 상황에 따라 클래스를 추가하거나 제거할 수 있게 해줍니다. 리액트JS를 사용하여 웹 애플리케이션을 개발할 때 이러한 클래스 추가 기능을 활용하여 좀 더 다양하고 독창적인 UI를 구성할 수 있습니다.