Question

所有

[更新]不要原因，但在删除所有节点模块并重新安装后，它可以正常工作！

我想知道是否有人可以举例说明如何操作React组件类名？

var React = require("react");
var ReactDOM = require("react-dom");
var classnames = require("classnames");

var Alert = React.createClass({
  render: function(){
    var styles = {
      backgroundColor: "red"
    }
// this part I do not know how to do, it does not work
//        var classNames = classnames({
//          "alert": true
//        });
    return (
      <div style={styles} className={classNames}>
      {this.props.children}
      </div>
    );
  }
});

ReactDOM.render(
  <Alert>Hello</Alert>,
  document.getElementById("content")
);

我尝试安装react-classset，但每次，npm说：＆＃34;套餐的反应并不能满足其兄弟姐妹的需求。 peerDependencies要求！＆＃34;

我不确定这意味着什么，这是否意味着这个lib已被弃用？

有什么想法吗？

由于

Answer 1

React blog post about the 0.14 release in the breaking changes section的官方建议是使用classnames package on npm。（classSet插件已弃用，警告为0.13，已移除0.14。）

Answer 2

没有任何插件你可以像这样做正常的字符串操作：

var Alert = React.createClass({
  render: function(){
    var styles = {
      backgroundColor: "red"
    }

    var classNames = true ? "alert" : "base";

    return (
      <div style={styles} className={classNames}>
      {this.props.children}
      </div>
    );
  }
});

否则，可以在github.com/JedWatson/classnames

中找到遗留的反应类功能

使用npm install classnames安装

deprecation notice

任何在React中操纵类名的lib

2 个答案: