未锁定的正则表达反应js误差

Question

class Lamp extends React.component {
     constructor(){
       super();
       this.state = {
       active: false
       };
     }
    toggleActive() {
       this.setState({ active: !this.state.active });
    }
    render() {
         return (
                <div
                style={{ backgroundColor: this.state.active ? 
                this.props.color : "" }}>lampada
                <button onclick={() => this.toggleActive()}>on/off</button>
                </div>
         );
   }
}
React.render(<Lamp color="green" />, document.body);

我打开index.html和Chrome的调试告诉我：" 未锁定的正则表达式"

您应该改用react-dom。

ReactDOM.render(<Lamp color="green" />, document.body)

class Lamp extends React.Component {
  constructor() {
    super()
    this.state = {
      active: false,
    }
    this.toggleActive = this.toggleActive.bind(this)
  }
  toggleActive() {
     this.setState({ active: !this.state.active })
  }
  render() {
    return (
      <div
        style={{ backgroundColor: this.state.active ? 'green' : 'red' }}
      >
        lampada
        <button onClick={this.toggleActive}>on/off</button>
       </div>
    )
  }
}
ReactDOM.render(
  <Lamp />,
  document.getElementById('root')
)

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