未知の子供と親の間の反応 - コミュニケーション

Question

親コンポーネントがあると仮定すると、それは多くのタイプの子を持つ可能性があります。例えば

：

class App extends React.Component<{}, {}> { 
    render() { 
     return (
      <div> 
       <parent> 
        <child-1/> 
       </parent> 
       <parent> 
        <child-2/> 
       </parent> 
      </div> 
     ); 
    } 
}; 
ReactDOM.render(<App />, document.getElementById('root')); 

親のみに従ってレンダリングされるべきイベント、 をドラッグするが、その後、そのX、Y、幅、高さは、その特定の子寸法に従ってレンダリングされるべきです。

この情報を子供から取得する方法はありますか？ または子供への参照を取得するには？

ありがとうございました！

Answer 1

私は右、あなたを理解していれば、あなたはイベントが発生したとき、彼らは親を更新れると子どもたちに更新機能を渡すことができます。

class App extends React.Component<{}, {}> { 
    childs = []; 

    render() { 
     return (
      <div> 
       <parent> 
        <child-1 ref={ (c) => this.childs.push(c) } /> 
       </parent> 
       <parent> 
        <child-2 ref={ (c) => this.childs.push(c) } /> 
       </parent> 
      </div> 
     ); 
    } 
}; 

：

class Parent extends React.Component<{}, {}> { 
    render() { 
     return ( 
      <div className="parent"> 
       <Child updatePosition={ this.onChildPositionUpdated.bind(this) } /> 
      </div> 
     ); 
    } 

    onChildPositionUpdated(x: number, y: number, width: number, height: number) { 
     // calculate things 
    } 
} 

interface ChildProps { 
    updatePosition(x: number, y: number, width: number, height: number); 
} 

class Child extends React.Component<ChildProps, {}> { 
    onDrag(...) { 
     // get dimensions 
     this.props.updatePosition(...); 
    } 

    render() { 
     return // ... 
    } 
} 

class App extends React.Component<{}, {}> { 
    render() { 
     return (
      <div> 
       <Parent /> 
      </div> 
     ); 
    } 
}; 

別のオプションはRefs to Componentsを使用することです

今、あなたが必要とすることができる配列の子どもたちと一緒に。