ReactJS 컴포넌트에 여러 클래스를 추가하는 방법

ReactJS 컴포넌트에 여러 클래스를 추가하는 방법

React JS와 JSX는 처음이라 아래 코드에 조금 문제가 있습니다.

하려고 합니다.className에게 li:

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

My 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: "My Account",
        icon: "icon-account"
      },
      {
        name: "Messages",
        icon: "icon-message"
      },
      {
        name: "Settings",
        icon: "icon-settings"
      }
    /*{
        name:"Help &amp; Support &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"));

용 i i i i를 쓴다.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'}`} />

사용할 클래스를 결정하는 데 필요한 논리가 꽤 있을 때 클래스 이름을 사용합니다.지나치게 단순한 예를 다음에 나타냅니다.

...
    var liClasses = classNames({
      'main-class': true,
      'activeClass': self.state.focused === index
    });

    return (<li className={liClasses}>{data.name}</li>);
...

즉, 종속성을 포함하지 않으려면 아래에 더 나은 답이 있습니다.

JavaScript를 사용하면 됩니다.

<li className={[activeClass, data.klass, "main-class"].join(' ')} />

개체에 클래스 기반 키 및 값을 추가하려면 다음을 사용할 수 있습니다.

function classNames(classes) {
  return Object.entries(classes)
    .filter(([key, value]) => value)
    .map(([key, value]) => key)
    .join(' ');
}

const classes = {
  'maybeClass': true,
  'otherClass': true,
  'probablyNotClass': false,
};

const myClassNames = classNames(classes);
// Output: "maybeClass otherClass"

<li className={myClassNames} />

또는 보다 심플하게:

const isEnabled = true;
const isChecked = false;

<li className={[isEnabled && 'enabled', isChecked && 'checked']
  .filter(e => !!e)
  .join(' ')
} />
// Output:
// <li className={'enabled'} />

콘캣

CSS 모듈을 사용하고 있기 때문에 안심하고 사용할 수 있습니다.

import style from '/css/style.css';

<div className={style.style1+ ' ' + style.style2} />

그 결과, 다음과 같은 결과가 됩니다.

<div class="src-client-css-pages-style1-selectionItem src-client-css-pages-style2">

즉, 두 가지 스타일 모두

조건

같은 아이디어를 사용하는 것이 편할 것입니다.

const class1 = doIHaveSomething ? style.style1 : 'backupClass';

<div className={class1 + ' ' + style.style2} />

ES6

지난 1년여 동안 템플릿 리터럴을 사용해 왔기 때문에 언급할 가치가 있다고 생각합니다.그것은 매우 표현적이고 읽기 쉽다고 생각합니다.

`${class1} anotherClass ${class1}`

이는 ES6 템플릿 리터럴을 사용하여 달성할 수 있습니다.

<input className={`base-input-class ${class1} ${class2}`}>

(명확하게 하기 위해 필요)

다음과 같이 여러 클래스 이름을 가진 요소를 만들 수 있습니다.

<li className="class1 class2 class3">foo</li>

당연히 클래스 이름을 포함하는 문자열을 사용하여 이 문자열을 조작하여 요소의 클래스 이름을 업데이트할 수 있습니다.

var myClassNammes = 'class1 class2 class3';
...
<li className={myClassNames}>foo</li>

ES6에서는 다음과 같이 할 수 있습니다.

className = {`
      text-right
      ${itemId === activeItemId ? 'active' : ''}
      ${anotherProperty === true ? 'class1' : 'class2'}
`}

여러 클래스 및 조건을 나열할 수 있으며 정적 클래스를 포함할 수도 있습니다.라이브러리를 추가할 필요는 없습니다.

행운을 빈다;)

바닐라 JS

외부 라이브러리는 필요 없습니다.ES6 템플릿 문자열만 사용합니다.

<i className={`${styles['foo-bar-baz']} fa fa-user fa-2x`}/>

여러 클래스를 추가하는 것만으로 외부 패키지를 사용할 필요는 없다고 생각합니다.

저는 개인적으로

<li className={`li active`}>Stacy</li>

또는

<li className={`li ${this.state.isActive ? 'active' : ''}`}>Stacy<li>

또는

<li className={'li ' + (this.state.isActive ? 'active' : '') }>Stacy<li>

조건부로 클래스를 추가하거나 제거해야 하는 경우 두 번째와 세 번째를 선택합니다.

---

일반적으로 사람들은 좋아한다.

<div className={  `head ${style.class1} ${Style.class2}`  }><div>

또는

<div className={  'head ' + style.class1 + ' ' + Style.class2 }><div>

또는

<div className={  ['head', style.class1 , Style.class2].join(' ')  }><div>

---

그러나 이 작업을 수행할 함수를 만들도록 선택할 수 있습니다.

function joinAll(...classes) {
  return classes.join(" ")
}

그럼 이렇게 불러주세요.-

<div className={joinAll('head', style.class1 , style.class2)}><div>

반 이름이 도움이 될지도 몰라

var classNames = require('classnames');
classNames('foo', {'xx-test': true, bar: false}, {'ox-test': false}); // => 'foo xx-test'

다음 작업을 수행할 수 있습니다.

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

간단하고 간단한 해결책입니다. 이것이 도움이 되기를 바랍니다.

https://www.npmjs.com/package/clsx 에서 실행할 수 있습니다.

https://www.npmjs.com/package/clsx

최초 설치:

npm install --save clsx

그런 다음 구성 요소 파일로 가져옵니다.

import clsx from  'clsx';

그런 다음 컴포넌트에 Import된 함수를 사용합니다.

<div className={ clsx(classes.class1, classes.class2)}>

CSS 모듈(또는 Sass Module)을 사용하면 스타일을 특정 컴포넌트로 분리할 수도 있습니다.

"컴포넌트 범위 CSS를 사용하면 기존의 휴대용 CSS를 최소한의 부작용으로 작성할 수 있습니다.셀렉터명이 충돌하거나 다른 컴포넌트의 스타일에 영향을 줄 염려가 사라졌습니다."

import * as styles from "./whatever.module.css"  // css version
import * as styles from "./whatever.module.scss" // sass version

<div className={`${styles.class1} ${styles.class2}`}>
   INSERT YOUR CODE HERE
</div>

참조 1 참조 2

추가만 하면 빈 문자열을 걸러낼 수 있습니다.

className={[
    'read-more-box',
    this.props.className,
    this.state.isExpanded ? 'open' : 'close',
].filter(x => !!x).join(' ')}

이렇게 여러 클래스 이름을 가진 요소를 만들 수 있습니다. 두 가지 방법을 모두 사용해 봤는데 잘 작동합니다.

임의의 css를 Import 하는 경우는, 다음의 방법을 실행할 수 있습니다.방법 1:

import React, { Component, PropTypes } from 'react';
import csjs from 'csjs';
import styles from './styles';
import insertCss from 'insert-css';
import classNames from 'classnames';
insertCss(csjs.getCss(styles));
export default class Foo extends Component {
  render() {
    return (
      <div className={[styles.class1, styles.class2].join(' ')}>
        { 'text' }
      </div>
    );
  }
}

방법 2:

import React, { Component, PropTypes } from 'react';
import csjs from 'csjs';
import styles from './styles';
import insertCss from 'insert-css';
import classNames from 'classnames';
insertCss(csjs.getCss(styles));
export default class Foo extends Component {
  render() {
    return (
      <div className={styles.class1 + ' ' + styles.class2}>
        { 'text' }
      </div>
    );
  }
}

**

css를 내부로 적용하는 경우:

const myStyle = {
  color: "#fff"
};

// React Element using Jsx
const myReactElement = (
  <h1 style={myStyle} className="myClassName myClassName1">
    Hello World!
  </h1>
);

ReactDOM.render(myReactElement, document.getElementById("app"));

.myClassName {
  background-color: #333;
  padding: 10px;
}
.myClassName1{
  border: 2px solid #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.production.min.js"></script>
<div id="app">
  
</div>

추가 클래스의 경우 추가

... className={`${classes.hello} ${classes.hello1}`...

늦은 답변인 건 알지만, 누군가에게 도움이 되었으면 좋겠어요.

css 파일 'primary', 'font-i', 'font-xl'에 다음 클래스를 정의했다고 간주합니다.

• 첫 번째 단계는 CSS 파일을 Import하는 것입니다.
• 그리고나서

<h3 class = {` ${'primary'} ${'font-i'} font-xl`}> HELLO WORLD </h3>

효과가 있을 거야!

상세한 것에 대하여는, https://www.youtube.com/watch?v=j5P9FHiBVNo&list=PLC3y8-rFHvwgg3vaYJgHGnModB54rxOk3&index=20 를 참조해 주세요.

이건 나한테 효과가 있는 것 같아

<Link className={[classes.button, classes.buttonFirst]}>

파티에 늦었지만, 왜 그렇게 간단한 문제에 제3자를 이용합니까?

@Huw Davies가 말한 대로 할 수 있습니다.최선의 방법

1. <i className={`${styles['foo-bar-baz']} fa fa-user fa-2x`}/>
2. <i className={[styles['foo-bar-baz'], 'fa fa-user', 'fa-2x'].join(' ')}

둘 다 좋다.그러나 대형 앱에서는 쓰기 작업이 복잡해질 수 있습니다.최적화하기 위해 위와 같은 일을 하지만 도우미 수업에 넣는다.

아래 도우미 기능을 사용하여 로직을 분리하여 나중에 편집할 수 있도록 하고 클래스를 추가할 수 있는 여러 가지 방법을 제공합니다.

classNames(styles['foo-bar-baz], 'fa fa-user', 'fa-2x')

또는

classNames([styles['foo-bar-baz], 'fa fa-user', 'fa-2x'])

아래는 저의 도우미 기능입니다.헬퍼에 넣어놨어요 제가 흔히 쓰는 방법들을 다 보관하고 있어요단순한 기능이기 때문에 서드파티를 사용하지 않고 제어할 수 있었습니다.

export function classNames (classes) {
    if(classes && classes.constructor === Array) {
        return classes.join(' ')
    } else if(arguments[0] !== undefined) {
        return [...arguments].join(' ')
    }
    return ''
}

어레이를 사용한 후 공간을 사용하여 어레이에 가입할 수 있습니다.

<li key={index} className={[activeClass, data.class, "main-class"].join(' ')}></li>

그 결과, 다음과 같은 결과가 됩니다.

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

---

이와 같은 함수를 만듭니다.

function cssClass(...c) {
  return c.join(" ")
}

필요할 때 전화하세요.

<div className={cssClass("head",Style.element,"black")}><div>

여러 가지 수업이 있을 때, 다음과 같은 것이 도움이 된다는 것을 알게 되었습니다.

는, 합니다.null및된 stringvalues에 넣습니다.

const buttonClasses = [
    "Button", 
    disabled ? "disabled" : null,
    active ? "active" : null
].filter((class) => class).join(" ")

<button className={buttonClasses} onClick={onClick} disabled={disabled ? disabled : false}>

Facebook의 ToTextInput.js 예제 사용

render() {
    return (
      <input className={
        classnames({
          edit: this.props.editing,
          'new-todo': this.props.newTodo
        })}
        type="text"
        placeholder={this.props.placeholder}
        autoFocus="true"
        value={this.state.text}
        onBlur={this.handleBlur}
        onChange={this.handleChange}
        onKeyDown={this.handleSubmit} />
    )
  } 

클래스명을 플레인 바닐라 js 코드로 대체하면 다음과 같이 됩니다.

render() {
    return (
      <input
        className={`
          ${this.props.editing ? 'edit' : ''} ${this.props.newTodo ? 'new-todo' : ''}
        `}
        type="text"
        placeholder={this.props.placeholder}
        autoFocus="true"
        value={this.state.text}
        onBlur={this.handleBlur}
        onChange={this.handleChange}
        onKeyDown={this.handleSubmit} />
    )
  }

않은 이 기능은 합니다.classNames★★★★★★ 。

function classNames(rules) {
    var classes = ''

    Object.keys(rules).forEach(item => {    
        if (rules[item])
            classes += (classes.length ? ' ' : '') + item
    })

    return classes
} 

다음과 같이 사용할 수 있습니다.

render() {
    var classes = classNames({
        'storeInfoDiv': true,  
        'hover': this.state.isHovered == this.props.store.store_id
    })   

    return (
        <SomeComponent style={classes} />
    )
}

https://www.npmjs.com/package/classnames 를 사용합니다.

classNames를 'classnames'에서 Import한다.

1. 구분된 콤마를 사용하여 여러 클래스를 사용할 수 있습니다.

   <li className={classNames(classes.tableCellLabel, classes.tableCell)}>Total</li>
   

2. 조건과 구분된 혼수를 사용하여 여러 클래스를 사용할 수 있습니다.

   <li className={classNames(classes.buttonArea, !nodes.length && classes.buttonAreaHidden)}>Hello World</li> 
   

classNames의 소품으로서 배열을 사용하는 것도 기능합니다만, 예를 들면 다음과 같습니다.

className={[classes.tableCellLabel, classes.tableCell]}

clsx로 간단하게!

"clsx 함수는 개체, 배열, 부울 또는 문자열 각각을 사용할 수 있는 임의의 수의 인수를 사용할 수 있습니다."

-- clsx docs on npmjs.com

Import:

import clsx from 'clsx'

사용방법:

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

나는 이 구문을 사용했다.

    <div
      className={[
        "d-inline-flex justify-content-center align-items-center ",
        withWrapper && `ft-icon-wrapper ft-icon-wrapper-${size}`,
        wrapperClass,
      ].join(" ")}
    >
      <img
        className={`ft-icon ft-icon-${size} ${iconClass}`}
        alt={id}
        src={icon}
      />
    </div>

그게 내가 하는 일이야.

컴포넌트:

const Button = ({ className }) => (
  <div className={ className }> </div>
);

호출 컴포넌트:

<Button className = 'hashButton free anotherClass' />

React 16.6.3 및 @Material UI 3.5.1을 사용하고 있으며 다음과 같은 className 어레이를 사용할 수 있습니다.className={[classes.tableCell, classes.capitalize]}

따라서 이 예에서는 다음과 같습니다.

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

언급URL : https://stackoverflow.com/questions/34521797/how-to-add-multiple-classes-to-a-reactjs-component