コンポーネント

Question

を反応させ、私はコンポーネントを反応させています

var Main = React.createClass({ 
    handleFoo: function() { 
    self.setState(...); 
    }, 
    ... 
}) 

私はそれをレンダリング：

var top = ReactDOM.Render(<Main />, document.getElementById("x")) 

そしてその後、私は外部ソースからのデータを受信し、私がしたいですトップレベルのコンポーネントと対話するので、私が試した：

top.handleFoo() 

をしかし、私は

を取得

TypeError: top.handleFoo is not a function 

コンポーネント階層の外部からトップレベルの反応コンポーネントとやりとりする正しい方法は何ですか？

Answer 1

あなたは正確に何をしようとしていますか？反応するようにデータを渡すと、通常propsを使用して行われ

：

var data = /* get your data from this external source */ 
ReactDOM.Render(<Main mydata={data} />, document.getElementById("x")) 

ここでは、いくつかのデータを取得し、mydataという名前の小道具としての当社の主なコンポーネントに渡します。私たちのコンポーネントから

私たちは、このように受け取った小道具を使用することができます。

var Main = React.createClass({ 
    handleFoo: function() { 
    var mydata = this.props.mydata; 
    /* do what you want with data */ 
    self.setState(...); 
    }, 
    ... 
}) 

注意してください、あなたはMainに渡すデータを更新したい場合は、あなたがしたい場合は、もう一度それをレンダリングしなければならないことコンポーネントを使用してデータを取得したり、reduxおよびreact-reduxを使用してアプリケーションの状態を管理することを避けることができます。

コンポーネント自体からデータを取得しない理由はありますか？

Answer 2

コンポーネント内で状態を変更する必要があります。クラスと対話する外部コンポーネントには、親クラスとピアクラスの2つのタイプがあります。親コンポーネントは、新しい小道具を送信することによって状態を変更することができます。ピアコンポーネントは、イベントを使用して状態を変更する必要があります。