reactjs - 不变违规: Minified React error #62

我在react组件内编写了以下方法，并且一切正常

render() { return (
   <div>
      <div>
         <AppHeader x = {this.state.x} y = {this.state.y} />
         <Button id = {0} x = {this.state.x} y = {this.state.y} answerKey = {this.state.answerKey} handleClick={this.handleClick} />
         <Button id = {1} x = {this.state.x} y = {this.state.y} answerKey = {this.state.answerKey} handleClick={this.handleClick} />
         <Button id = {2} x = {this.state.x} y = {this.state.y} answerKey = {this.state.answerKey} handleClick={this.handleClick} />
         <Button id = {3} x = {this.state.x} y = {this.state.y} answerKey = {this.state.answerKey} handleClick={this.handleClick} />
      </div>
      <div>
         <ScoreBoard correct={this.state.correct} incorrect={this.state.incorrect} />
      </div>
   </div>
)}

但是2个div出现在另一个顶部。我将代码更改为

render() { return (
   <div>
      <div style='float:left'>
         <AppHeader x = {this.state.x} y = {this.state.y} />
         <Button id = {0} x = {this.state.x} y = {this.state.y} answerKey = {this.state.answerKey} handleClick={this.handleClick} />
         <Button id = {1} x = {this.state.x} y = {this.state.y} answerKey = {this.state.answerKey} handleClick={this.handleClick} />
         <Button id = {2} x = {this.state.x} y = {this.state.y} answerKey = {this.state.answerKey} handleClick={this.handleClick} />
         <Button id = {3} x = {this.state.x} y = {this.state.y} answerKey = {this.state.answerKey} handleClick={this.handleClick} />
      </div>
      <div style='float:right'>
         <ScoreBoard correct={this.state.correct} incorrect={this.state.incorrect} />
      </div>
   </div>
)}

但是，一旦我将样式向左和向右移动。我得到一个错误

Invariant Violation: Minified React error #62; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=62&args[]=%20This%20DOM%20node%20was%20rendered%20by%20%60Quiz%60. for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

我根本听不懂这个错误。为什么style ='float:left'这么重要？

最佳答案

样式需要样式的Javascript对象。您提供的是一个字符串。

<div style={{float: 'right'}}>
   <ScoreBoard correct={this.state.correct} incorrect={this.state.incorrect} />
</div>

从文档中:https://reactjs.org/docs/dom-elements.html#style

关于reactjs - 不变违规: Minified React error #62，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48897903/