Использование событий между компонентами React с удаленными отношениями

Question

У меня есть один компонент, который при щелчке должен сделать запрос на получение и изменить содержимое совершенно другого компонента. Я сделал рисунок, чтобы показать их отношения:

Мне сказали использовать Flux, чтобы сделать это, но, чтобы быть полностью честным, я полностью потерялся, пытаясь их изучить, и мне не понравилось то, что я видел. Чтобы еще более усложнить ситуацию, этот проект не использует npm или узел, который, по-видимому, практически необходим для всех обучающих программ, поэтому, если я действительно должен использовать Flux, как мне это избежать без npm, и все вызовы требуют ? Вот мой текущий соответствующий код:

var AboutItem = React.createClass({ 
    handleClick: function(event){ 
     //do something to update ChangeLogData! 
    }, 

    render: function() { 
     return (
      <ListGroup> 
       {this.props.list.map(function (listValue,key) { 
        var link = currentUrl + "/changelog/" + listValue.split(' ')[0]; 
        return <ListGroupItem key={key} className="module" 
                bsStyle="warning" 
                onClick={this.handleClick}> 
         {listValue} 
        </ListGroupItem> 
       }, this)} 
      </ListGroup> 
     ); 
    } 
}); 

var ChangeLogData = React.createClass({ 

    getInitialState: function() { 
     return { 
      content: {}, 
     }; 
    }, 

    render: function() { 
     return (
      <div> 
       Something from AboutItem 
      </div> 
     ); 
    } 
}); 

Answer 1

Самое лучшее, что вы можете сделать (что я могу думать), чтобы сделать handleClick функцию в <About /> компонента и сделать его обновить log состояние. Затем из этого компонента вы можете передать эту функцию как props в компонент <AboutItem/> и передать состояние журнала до дерева как props. Таким образом, всякий раз, когда состояние изменяется, <ChangeLogData /> получит его и повторно отобразит.

Answer 2

В реакторе, данные по течению и событиям вверх по течению. Что вам нужно сделать, это

1. Сделать About компонент с сохранением состояния и содержат некоторое свойство состояния, скажем shouldUpdateLog. По умолчанию это неверно.
2. Передача функции на AboutItem Компонент в виде опоры из его родителя, About Компонент. Функция будет обновлять состояние компонента About.
3. Передайте имущество About состоянии компонента до ChangeLogData и зависит от его значения при любом обновлении компонента. Если вы поместите эти данные в render, это будет легко, но поскольку вам нужно запустить функцию, вам нужно будет прослушать каждые componentDidUpdate из ChangeLogData.

Итак, первое, About:

class About extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     shouldUpdateLog: false 
    }; 
    } 

    handleUpdate() { 
    this.setState({ 
     shouldUpdateLog: true 
    }); 
    } 

    render() { 
    return (
     <div> 
     <AboutItem onUpdate={this.handleUpdate.bind(this)} /> 
     <ChangeLog> 
      <ChangeLogData shouldUpdateLog={this.state.shouldUpdateLog} /> 
     </ChangeLog> 
     </div> 
    ); 
    } 
} 

Теперь AboutItem:

class AboutItem extends React.Component { 
    render() { 
    return (
     <div> 
     <button onClick={this.props.onUpdate} /> 
     </div> 
    ); 
    } 
} 

И, наконец, ChangeLogData:

class ChangeLogData extends React.Component { 
    componentDidUpdate() { 
    if (this.props.shouldUpdateLog) { 
     // call that function! 
    } 
    } 

    render() { 
    return (
     <div /> 
    ); 
    } 
}