ReactJS - 在兄弟之間傳遞參考

Question

我目前在構建我的ReactJS應用程序時遇到問題。我有一個數組，採取這種形式：

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

這種架構需要呈現一些「進化樹」，如：

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

其中每個「項目」或「兒童」是一個組件（稱爲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. 

箭需要在接下來的演進步驟是渲染（在本例中指向的方向演變，項目和項目的第一個孩子之間的第一個箭頭將直了點，但如果項目的第一個孩子的位置就像{top: -20px}箭頭應指向上方

爲了實現這個目標，每個演化步驟在渲染時調用演化鏈中的函數以將其引用添加到本地狀態。當渲染箭頭時，它會通過它應該指向的Evolution Step的引用。問題是Evolution Arrow的reference prop始終是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

修好了！所有我必須做的是包裹在undefined引號stepDidMount，否則該條件總是假的... ...

Answer 2

裁判和componentDidMount（）做的伎倆。

以下代碼可幫助我設置兩個兄弟之間的通信。該設置在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> 
     ); 
    } 
}