ReactJSコンポーネントは分離されたスコープを持たないようです

Question

私はAngularJSからReactJSを初めて使用しています。私は、ボタンを持つコンポーネントを持っているし、そのボタンをクリックすると、テキストエリアが表示されます。このカスタムコンポーネントを考えるが反応：ボタンがクリックされるたびに、私は、コンポーネントのUI.showNotesコンソールの状態をロギングしてい

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> 
     ) 
    } 
}); 

お知らせ。私はこのように、私のメインのアプリ内でこれらのコンポーネントのいくつかを置く場合：

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') 
    ); 

私はbuttonをクリックすると、どのようなコンソールにログインしますと、常に以前にコンソールに記録されたものの反対の値です。 問題は、どのボタンをクリックしても問題ありません。つまり、コンポーネントごとに1つのインスタンスではなく、this.UIというインスタンスが1つしかないように見えます。それは本当に、私を混乱させるgiven ReactJS' documentation on the matter：

が反応すべてのクラスコンポーネントのインスタンスを作成するの世話をするので、あなたは、メソッドや地元の状態を持つオブジェクト指向の方法でコンポーネントを作成することができますが、それ以外の、インスタンスはありませんReactのプログラミングモデルでは非常に重要であり、React自身が管理しています。

this.UIは、コンポーネントのすべてのインスタンス間で共有される「グローバル」オブジェクトではなく、各コンポーネントに対して一意であることが期待されます。

1. なぜこれが当てはまりませんか？
2. これは事実ではないので、希望の効果を達成するためにコンポーネントを再構築する最良の方法は何ですか？それはプロトタイプに定義されていますので、あなたは基本的にすべてのインスタンス間で共有されるオブジェクトを作成している

   UI: { 
       showNotes: false 
   }, 
   

   を使用することにより

Answer 1

、したがって、あなたはshowNotesを変更した場合、すべてのインスタンスが変更 を参照してくださいそれは何もしていますReactとは関係がありますが、JavaScriptを使用しています。私が見

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> 
     ) 
    } 
});