Cách thêm nhiều lớp vào Thành phần ReactJS

Tôi chưa quen với ReactJS và JSX và tôi gặp một chút vấn đề với mã bên dưới.

Tôi đang cố gắng thêm nhiều lớp vào classNamethuộc tính trên mỗi li:

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

Thành phần React của tôi là:

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"));

Tôi sử dụng tên lớp khi có một lượng logic hợp lý cần thiết để quyết định các lớp sử dụng (không). Một ví dụ quá đơn giản :

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

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

Điều đó nói rằng, nếu bạn không muốn bao gồm một phụ thuộc thì có câu trả lời tốt hơn dưới đây.

Tôi sử dụng ES6 mẫu chữ . Ví dụ:

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

Và sau đó chỉ hiển thị nó:

<input className={classes} />

Phiên bản một lớp lót:

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

Chỉ cần sử dụng JavaScript.

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

Nếu bạn muốn thêm các khóa và giá trị dựa trên các lớp trong một đối tượng, bạn có thể sử dụng như sau:

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} />

Hoặc thậm chí đơn giản hơn:

const isEnabled = true;
const isChecked = false;

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

Concat

Không cần phải thích tôi đang sử dụng các mô-đun CSS và thật dễ dàng

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

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

Điều này sẽ dẫn đến:

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

Nói cách khác, cả hai phong cách

Điều kiện

Sẽ thật dễ dàng để sử dụng cùng một ý tưởng với if

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

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

Điều này có thể đạt được với các mẫu chữ ES6:

<input className={`class1 ${class2}`}>

Bạn có thể tạo một phần tử có nhiều tên lớp như thế này:

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

Đương nhiên, bạn có thể sử dụng một chuỗi chứa tên lớp và thao tác chuỗi này để cập nhật tên lớp của phần tử.

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

Đây là cách bạn có thể làm điều đó với ES6:

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

Bạn có thể liệt kê nhiều lớp và điều kiện và bạn cũng có thể bao gồm các lớp tĩnh. Không cần thiết phải thêm một thư viện bổ sung.

Chúc may mắn ;)

Vanilla JS

Không cần thư viện bên ngoài - chỉ cần sử dụng chuỗi mẫu ES6 :

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

Có lẽ tên lớp có thể giúp bạn.

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

Tôi không nghĩ rằng chúng ta cần sử dụng một gói bên ngoài để chỉ thêm nhiều lớp.

Cá nhân tôi sử dụng

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

hoặc là

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

cái thứ hai trong trường hợp bạn cần thêm hoặc loại bỏ các lớp một cách có điều kiện.

Chỉ cần thêm, chúng ta có thể lọc ra các chuỗi trống.

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

Bạn có thể tạo một phần tử với nhiều tên lớp như thế này, tôi đã thử cả hai cách, nó hoạt động tốt ...

Nếu bạn nhập bất kỳ css nào thì bạn có thể làm theo cách này: Cách 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>
    );
  }
}

cách 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>
    );
  }
}

**

Nếu bạn áp dụng css như nội bộ:

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>

Bạn có thể làm như sau:

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

Một giải pháp ngắn và đơn giản, hy vọng điều này sẽ giúp.

Nó có thể được thực hiện với https://www.npmjs.com/package/clsx :

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

Đầu tiên cài đặt nó:

npm install --save clsx

Sau đó nhập nó trong tệp thành phần của bạn:

import clsx from  'clsx';

Sau đó sử dụng hàm được nhập trong thành phần của bạn:

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

Đến bữa tiệc muộn, nhưng tại sao lại sử dụng bên thứ ba cho một vấn đề đơn giản như vậy?

Bạn có thể làm như @Huw Davies đã đề cập - cách tốt nhất

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(' ')}

Cả hai đều tốt. Nhưng viết có thể trở nên phức tạp cho một ứng dụng lớn. Để làm cho nó tối ưu, tôi làm những điều tương tự ở trên nhưng đặt nó trong một lớp trợ giúp

Sử dụng chức năng trợ giúp bên dưới của tôi, cho phép tôi tách riêng logic để chỉnh sửa trong tương lai và cũng cho tôi nhiều cách để thêm các lớp

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

hoặc là

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

Đây là chức năng trợ giúp của tôi dưới đây. Tôi đã đặt nó trong helper.js nơi tôi giữ tất cả các phương thức phổ biến của mình. Là một chức năng đơn giản như vậy, tôi tránh sử dụng bên thứ 3 để kiểm soát

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

Bạn có thể sử dụng mảng và sau đó nối chúng bằng khoảng trắng.

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

Điều này sẽ dẫn đến:

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

Tôi biết đây là một câu trả lời muộn, nhưng tôi hy vọng điều này sẽ giúp được ai đó.

Hãy xem xét rằng bạn đã xác định các lớp sau trong tệp css ' chính ', ' font-i ', ' font-xl '

• Bước đầu tiên sẽ là nhập tệp CSS.
• Sau đó

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

sẽ làm các mẹo!

Để biết thêm thông tin: https://www.youtube.com/watch?v=j5P9FHiBVNo&list=PLC3y8-rFHvwgg3vaYJgHGnModB54rxOk3&index=20

để thêm lớp

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

Sử dụng ví dụ TodoTextInput.js của facebook

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} />
    )
  } 

thay thế tên lớp bằng mã jilla vanilla đơn giản sẽ như thế này:

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} />
    )
  }

Nếu bạn không muốn nhập mô-đun khác, chức năng này hoạt động giống như classNamesmô-đun.

function classNames(rules) {
    var classes = ''

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

    return classes
} 

Bạn có thể sử dụng nó như thế này:

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

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

Đó là những gì tôi làm:

Thành phần:

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

Thành phần gọi:

<Button className = 'hashButton free anotherClass' />

Tôi đang sử dụng React 16.6.3 và @M vật liệu UI 3.5.1 và có thể sử dụng các mảng trong className như className={[classes.tableCell, classes.capitalize]}

Vì vậy, trong ví dụ của bạn, sau đây sẽ là tương tự.

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

Sử dụng https://www.npmjs.com/package/ classnames

nhập tên lớp từ 'tên lớp';

1. Có thể sử dụng nhiều lớp bằng cách sử dụng comas tách biệt:

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

2. Có thể sử dụng nhiều lớp bằng cách sử dụng các khoảng cách

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

Sử dụng mảng làm đạo cụ cho classNames cũng sẽ hoạt động, nhưng đưa ra cảnh báo, ví dụ:

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

Tôi sử dụng gói RC-classnames .

// ES6
import c from 'rc-classnames';

// CommonJS
var c = require('rc-classnames');

<button className={c('button', {
  'button--disabled': isDisabled,
  'button--no-radius': !hasRadius
})} />

Bạn có thể thêm các lớp ở bất kỳ định dạng nào (Mảng, Đối tượng, Đối số). Tất cả các giá trị trung thực từ mảng hoặc đối số cộng với các khóa trong các đối tượng bằng nhau để trueđược hợp nhất với nhau.

ví dụ:

ReactClassNames('a', 'b', 'c') // => "a b c"
ReactClassNames({ 'a': true, 'b': false, c: 'true' }) // => "a c"
ReactClassNames(undefined, null, 'a', 0, 'b') // => "a b"

Tôi bind classNamesđến mô-đun css được nhập vào thành phần.

import classNames from 'classnames'; 
import * as styles from './[STYLES PATH];
const cx = classNames.bind(styles); 

classnames cho khả năng khai báo className cho phần tử React theo cách khai báo.

Ví dụ:

<div classNames={cx(styles.titleText)}> Lorem </div>

<div classNames={cx('float-left')}> Lorem </div> // global css declared without css modules
<div classNames={cx( (test === 0) ?
             styles.titleText : 
             styles.subTitleText)}>  Lorem </div> // conditionally assign classes

<div classNames={cx(styles.titleText, 'float-left')}> Lorem </div> //combine multiple classes

Tôi thường sử dụng nó như thế này: (trong trường hợp của bạn)

    <li  key={index} className={
        "component " +
        `${activeClass? activeClass: " not-an-active-class "}` +
        `${data.class? " " + data.class : " no-data-class "}`
   } />

Khi nói đến JSX và (thông thường), chúng ta có một số json ... hơn là bạn lặp nó ... thành phần . ánh xạ , cộng với một số điều kiện để kiểm tra xem thuộc tính json có tồn tại để hiển thị tên lớp hay không tùy thuộc vào giá trị thuộc tính từ JSON. Trong ví dụ bên dưới thành phần_color và thành phần_dark_shade là các thuộc tính từ thành phần.map ()

   <div className={
        "component " +
        `${component_color? component_color: " no-color "}` +
        `${component_dark_shade? " " + component_dark_shade : " light "}`
   }/>

Đầu ra: <div class="component no-color light" .... Hoặc: <div class="component blue dark" ....tùy thuộc vào các giá trị từ bản đồ ...

Khi tôi có nhiều lớp khác nhau, tôi đã thấy những điều sau đây là hữu ích.

Bộ lọc loại bỏ bất kỳ nullgiá trị nào và phép nối đặt tất cả các giá trị còn lại vào một chuỗi được phân tách bằng dấu cách.

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

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