ReactJS - 兄弟間の参照を渡す

Question

現在、私のReactJSアプリケーションを構築する際に問題が発生しています。各「項目」または「子」はどこ

| item | => | item's first child | => | first child's first child | .. 
|  | => | item's second child | 

：のように、

が

[{ 
    _id: 123456, 
    ... 
    children: [ 
     { 
     _id: 568, 
     ... 
     children: [...] // and so on, recursively 
      }, 
     .... 
    ] 
}] 

このアーキテクチャは、いくつかの「進化ツリー」としてレンダリングする必要があります：私はこの形式を取り配列を持っています（EvolutionStepと呼ばれます）、各「=>」矢印は別のコンポーネント（EvolutionArrowと呼ばれます）です。アローは、次の進化のステップがレンダリングされる方向にポイントする必要が進化が（例では、項目と項目の最初の子との間に最初の矢印がまっすぐ指します

Evolution Chain => parent component, that renders 
Evolution Step => containing the evolution props (name, etc) 
Evolution Arrow => linking one step to one of it's children. 

が、もし：だから我々は、3つの構成要素を持っています項目の最初の子の位置が

はこれを達成するためには、レンダリングされたそれぞれの進化のステップは、ローカル状態への参照を追加するために進化チェーン内の関数を呼び出します。矢印が上向きビットを指している必要があり{top: -20px}のようなものです。そして、それぞれの進化矢印はレンダリングされると、指し示す進化ステップへの参照を渡します。問題は、進化矢印のreference小道具は常にunです定義されています...

私は自分自身を正しく説明したかどうか分かりませんので、ここに私のコードです。 Evolution Arrowクラスでconsole.log（this.props.references）を設定すると、常に定義されていないことに注意してください。

ご協力いただきありがとうございます。

import PropTypes from 'prop-types'; 
import React from 'react'; 

class EvolutionStep extends React.Component { 

    componentDidMount() { 
     this.props.mountCallable(this.props.step._id, this); 
    } 

    render() { 
     return (
      <div style={{width: this.props.width + "%"}} data-identifier={this.props.step._id}>step</div> 
     ); 
    }; 

} 

class EvolutionArrow extends React.Component { 

    render() { 
     console.log(this.props); 
     return (
      <div>arrow</div> 
     ); 
    } 
} 

const EvolutionChain = class EvolutionChain extends React.Component { 

    constructor(props) { 
     super(props); 

     this.processStack.bind(this); 
     this.stepDidMount.bind(this); 
     this.preRender.bind(this); 

     this.state = { 
      cols: 0, 
      chainData: [], 
      refs: {} 
     }; 
    } 

    componentDidMount() { 
     this.processStack(); 
    } 

    stepDidMount(step_id, element) { 
     let refs = this.state.refs; 

     if (undefined == typeof(refs[step_id])) { 
      refs[step_id] = element; 
      this.setState({refs: refs}); 
     } 
    } 

    processStack() { 
     if (null == this.props.chain) { 
      return null; 
     } 

     let stack = [this.props.chain.children[0]]; 
     let results = []; 

     while (stack.length > 0) { 
      const current = stack.pop(); 
      // build current element 
      results.push({type: 'step', props: {step: current} }); 
//   results.push(<EvolutionStep key={current._id} ref={(step) => this.addRef(current._id, step)} step={current} width={(100/this.state.cols)}/>); 
      this.setState({cols: this.state.cols + 1}); 
      if (current.children.length > 0) { 
       let arrows = []; 
       current.children.map((item) => { 
        arrows.push({pointsTo: item._id}); 
        //arrows.push(<EvolutionArrow pointsTo={item._id} references={this.state.refs}/>); 
       }); 
//    results.push(<div className="arrow" width={(100/this.state.cols)}>{arrows}</div>); 
       results.push({type: 'arrows', arrows: arrows}); 
       this.setState({cols: this.state.cols + 1}); 
       stack = current.children; 
      } 
     } 

     results.reverse(); 
     this.setState({chainData: results}); 
    } 

    preRender() { 
     var components = []; 
     this.state.chainData.map((item) => { 
      switch (item.type) { 
       case 'step': 
        components.push(<EvolutionStep key={item.props.step._id} {...item.props} mountCallable={(step_id, elem) => this.stepDidMount(step_id, elem)}/>); 
        break; 
       case 'arrows': 
        let arrows = []; 
        item.arrows.map((arrow) => { 
         arrows.push(<EvolutionArrow pointsTo={arrow.pointsTo} references={this.state.refs[arrow.pointsTo]} />); 
        }); 
        components.push(<div className="arrow">{arrows}</div>); 
        break; 
      } 
     }); 

     return components; 
    } 

    render() { 

     let toRender = this.preRender(); 
     return (
      <div className="container-fluid"> 
       {toRender} 
      </div> 
     ); 
    } 

}; 

/** TODO: PropTypes **/ 

export default EvolutionChain; 

Answer 1

修正済み！私がしなければならなかったすべては

Answer 2

レフリーとcomponentDidMount（）トリックを行う...それ以外の条件は常に偽だった、stepDidMountに引用符でundefinedをラップです。

次のコードは、2人の兄弟間の通信をセットアップするのに役立ちます。設定は、render（）およびcomponentDidMount（）の呼び出し中に親で行われます。 それはhttps://reactjs.org/docs/refs-and-the-dom.html

class App extends React.Component<IAppProps, IAppState> { 
    private _navigationPanel: NavigationPanel; 
    private _mapPanel: MapPanel; 

    constructor() { 
     super(); 
     this.state = {}; 
    } 

    // `componentDidMount()` is called by ReactJS after `render()` 
    componentDidMount() { 
     // Pass _mapPanel to _navigationPanel 
     // It will allow _navigationPanel to call _mapPanel directly 
     this._navigationPanel.setMapPanel(this._mapPanel); 
    } 

    render() { 
     return (
      <div id="appDiv" style={divStyle}> 
       // `ref=` helps to get reference to a child during rendering 
       <NavigationPanel ref={(child) => { this._navigationPanel = child; }} /> 
       <MapPanel ref={(child) => { this._mapPanel = child; }} /> 
      </div> 
     ); 
    } 
}