Question

我是reacj.js的新手，我正在尝试使用类似于Angular的ng-class的库类名（https://www.npmjs.com/package/classnames）。我检查了他们的文档，但我真的不明白它是如何工作的。有人用过吗？你能告诉我一个例子吗？

Answer 1

这里有一个例子，你可以尝试将绿色改为假。

var Comp1 = React.createClass({
  render: function() {
    var g = classNames({green: true});
    return(
      <div className={g}>hello world</div>
    );
  }
});

var Main = React.createClass({
  render: function() {
    return(
      <div>
        <Comp1 />
      </div>
    );
  }
});

React.render(<Main />, document.getElementById('app'));

jsbin：http://jsbin.com/yipiyizano/edit?js,console,output

Answer 2

..如果要在某些条件下添加/删除类，则可以使用：

class Main extends React.Component {
 constructor() {
    super();
    this.state = {
      isChecked: false
    }
  }
  const g = classNames({
    green: true,
    'border-red': !this.state.isChecked
  })
  handleClick = () => {
  this.setState({
    isChecked: !this.state.isChecked
  })
  }
  render() {
    return ( 
      <button className = {classNames} onClick = {handleClick} />
    )
  }
}
export default Main;

如何为React.js使用类名库

2 个答案: