如何添加多个类到ReactJS组件 [英] How to add multiple classes to a ReactJS Component

问题描述

我是ReactJS和JSX的新手，我下面的代码有一点问题。

I am new to ReactJS and JSX and I am having a little problem with the code below.

我正在尝试添加多个类到每个 li c classNames code>：

I am trying to add multiple classes to the classNames attribute on each li:

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

我的React组件是：

My React component is:

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>[phone]",
                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')
);

推荐答案

我使用 classnames 。例如：

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

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

这篇关于如何添加多个类到ReactJS组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！