вызова метода на верхнем уровне реагировать компонент

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

Любые изменения состояния должны быть сделаны внутри компонента. Внешние компоненты, которые взаимодействуют с классом, имеют два типа: родительский и одноранговый. Родительские компоненты могут изменять состояние путем отправки новых реквизитов. Компоненты однорангового узла должны изменять состояние с помощью событий.