根据反应组件状态更新 className 的最佳方法

Question

根据反应组件的状态更新 Classname 字段的最佳方法是什么？

我有一个在我的反应组件的状态中调用的变量，并且想要根据它是或inverted来更新我的一些变量的类名。divstruefalse

解决这个问题的最佳方法是什么？我应该有一个单独的方法来更新类名吗？如果是这样，我该如何处理 setState 方法的异步性？如果我应该在 div 内更新它，最好的方法是什么？

Answer 1

如果您在不同的方法上需要相同的功能，设置一个功能可能会有所帮助className；或者如果您的render方法太大，您需要将其分成小块。但通常你只需要方法className中的render。

\n\n

如果您有多个divs需要相同的变量className，我建议仅在方法内使用局部变量render。这将使代码简单易懂且简短。检查以下代码片段作为示例：

\n\n

\r\n

\r\n

class MyComponent extends React.Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this.state = {\r\n      inverted: true\r\n    };\r\n    this.toggleInverted = this.toggleInverted.bind(this);\r\n  }\r\n\r\n  toggleInverted() {\r\n    this.setState({inverted: !this.state.inverted});\r\n  }\r\n\r\n  render () {\r\n    const classNameDivs = this.state.inverted ? \'sky-blue\' : \'red\';\r\n    return(\r\n      <div>\r\n        <input type="checkbox" checked={this.state.inverted} onChange={this.toggleInverted} />\r\n        <div className={classNameDivs}>&nbsp;</div>\r\n        <div className={this.state.inverted ? \'white\' : \'yellow\'}>\r\n          {this.state.inverted ? \'Argentina\' : \'Espa\xc3\xb1a\'}\r\n        </div>\r\n        <div className={classNameDivs}>&nbsp;</div>\r\n      </div>\r\n    )\r\n  }\r\n}\r\n\r\nReactDOM.render(<MyComponent />, document.getElementById(\'container\'));

\r\n

.red {\r\n  background-color: #c60b1e;\r\n}\r\n.yellow {\r\n  background-color: #ffc400;\r\n}\r\n.sky-blue {\r\n  background-color: #74acdf;\r\n}\r\n.white {\r\n  background-color: white;\r\n}

\r\n

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>\r\n<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>\r\n<div id="container"/>

\r\n

\r\n

\r\n

\n\n

但通常不需要className多次设置 a，因为通常可以通过 CSS 更好地处理它。例如，条件className可以用在所有divs. thendivs将在 JS 中使用常规className，并在 CSS 端使用条件父级。与之前的示例相同，但在 JS 中仅定义一次条件className，如以下代码片段所示：

\n\n

\r\n

\r\n

class MyComponent extends React.Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this.state = {\r\n      inverted: true\r\n    };\r\n    this.toggleInverted = this.toggleInverted.bind(this);\r\n  }\r\n\r\n  toggleInverted() {\r\n    this.setState({inverted: !this.state.inverted});\r\n  }\r\n\r\n  render () {\r\n    return(\r\n      <div className={this.state.inverted ? \'argentina-flag\' : \'espania-flag\'}>\r\n        <input type="checkbox" checked={this.state.inverted} onChange={this.toggleInverted} />\r\n        <div className=\'top-bottom\'>&nbsp;</div>\r\n        <div className=\'middle\'>{this.state.inverted ? \'Argentina\' : \'Espa\xc3\xb1a\'}</div>\r\n        <div className=\'top-bottom\'>&nbsp;</div>\r\n      </div>\r\n    )\r\n  }\r\n}\r\n\r\nReactDOM.render(<MyComponent />, document.getElementById(\'container\'));

\r\n

.espania-flag .top-bottom {\r\n  background-color: #c60b1e;\r\n}\r\n.espania-flag .middle {\r\n  background-color: #ffc400;\r\n}\r\n.argentina-flag .top-bottom {\r\n  background-color: #74acdf;\r\n}\r\n.argentina-flag .middle {\r\n  background-color: white;\r\n}

\r\n

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>\r\n<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>\r\n<div id="container"/>

\r\n

\r\n

\r\n

\n