Javascript ReactJS组件没有'；似乎没有孤立的范围

我是ReactJS的新手，来自AngularJS。我想有一个组件，有一个按钮，当你点击按钮，它显示一个文本区域。在React中给定此自定义组件：

Toggle = React.createClass({
    UI: {
        showNotes: false
    },
    toggleShowNotes: function () {
        this.UI.showNotes = !this.UI.showNotes;
        console.log(this.UI.showNotes);
        this.setState({UI: this.UI});
    },
    render: function () {
        return (
            <div className="well">
                <div className="form-group">
                    <button className="btn btn-default" onClick={this.toggleShowNotes}>+ Add Notes</button>
                </div>
                {this.UI.showNotes ? <textarea className="form-control" placeholder="Notes"></textarea> : null }
            </div>
        )
    }
});

当我单击

按钮时

，记录到控制台的内容总是与以前记录到控制台的内容相反的值问题是，无论我单击哪个

按钮，这都是正确的。换句话说，似乎只有一个

this.UI的实例，而不是每个组件一个实例。这真让我困惑，：

React负责为每个类组件创建一个实例，因此您可以使用方法和本地状态以面向对象的方式编写组件，但除此之外，实例在React的编程模型中并不十分重要，由React本身管理

我希望
this.UI
对每个组件都是唯一的，而不是在组件的所有实例之间共享的“全局”对象

为什么不是这样
既然不是这样，那么为了达到预期效果，我重组组件的最佳方式是什么
利用

UI: {
    showNotes: false
},

您实际上是在创建一个在所有实例之间共享的对象，因为它是在原型上定义的，因此如果更改showNotes，所有实例都会看到更改
它与React无关，而是与JavaScript有关

相反，请使用以下内容：

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

ReactDOM.render(
        <App/>,
        document.getElementById('container')
    );

Toggle = React.createClass({
    getInitialState: function() {
        return {showNotes: true};
    },
    toggleShowNotes: function () {
        this.setState({showNotes: !this.state.showNotes});
    },
    render: function () {
        return (
            <div className="well">
                <div className="form-group">
                    <button className="btn btn-default" onClick={this.toggleShowNotes}>+ Add Notes</button>
                </div>
                {this.state.showNotes ? <textarea className="form-control" placeholder="Notes"></textarea> : null }
            </div>
        )
    }
});

Toggle=React.createClass({
getInitialState:函数（）{
返回{showNotes:true}；
},
toggleShowNotes:函数（）{
this.setState（{showNotes:！this.state.showNotes}）；
},
渲染：函数（）{
返回(
+添加注释
{this.state.showNotes？：null}
)
}
});
通过使用

UI: {
    showNotes: false
},

您实际上是在创建一个在所有实例之间共享的对象，因为它是在原型上定义的，因此如果更改showNotes，所有实例都会看到更改
它与React无关，而是与JavaScript有关

相反，请使用以下内容：

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

ReactDOM.render(
        <App/>,
        document.getElementById('container')
    );

Toggle = React.createClass({
    getInitialState: function() {
        return {showNotes: true};
    },
    toggleShowNotes: function () {
        this.setState({showNotes: !this.state.showNotes});
    },
    render: function () {
        return (
            <div className="well">
                <div className="form-group">
                    <button className="btn btn-default" onClick={this.toggleShowNotes}>+ Add Notes</button>
                </div>
                {this.state.showNotes ? <textarea className="form-control" placeholder="Notes"></textarea> : null }
            </div>
        )
    }
});

Toggle=React.createClass({
getInitialState:函数（）{
返回{showNotes:true}；
},
toggleShowNotes:函数（）{
this.setState（{showNotes:！this.state.showNotes}）；
},
渲染：函数（）{
返回(
+添加注释
{this.state.showNotes？：null}
)
}
});
啊，我明白了。因此，
React.createClass（）
只被调用一次，不管有多少组件是从中创建的。我懂了。谢谢啊，我明白了。因此，
React.createClass（）
只被调用一次，不管有多少组件是从中创建的。我懂了。谢谢