React：ネストしたコンポーネントのクリックイベントをバブルアップ

Question

私はリアクションファイルツリーを作成しています。ツリーには、contents小文字のいずれかの配列、またはその他の<Tree />コンポーネント（ネストされたファイル構造のUIを有効にする）のいずれかの配列を使用できます。これらのツリーコンポーネントは無期限にネストすることができます。

ネストされたツリーコンポーネントの子にclickイベントを登録する必要がありますが、ネストした最初のレベルを超えて動作させるのに問題があります。私が扱ってるかの簡単な例： - 、それがない場合

//In App - the top level component 

const App = React.createClass({ 
    _handleChildClick() { 
    console.log("this is where all child clicks should be handled"); 
    }, 

    render() { 
    return (
     <Tree 
     handleChildClick={this._handleChildClick} 
     contents={[ 
      <Tree /> 
     ]} 
     /> 
    ); 
    } 
}); 

//And in the tree component 

<div onClick={this.props.handleChildClick}></div> 

If you want to see more detail - here's the github repo.

私はこの質問を研究しようとした{...this.props}を使用している人々を見たが、私はそれが私のシナリオに適用されるかどうかわからないんだけど私はそれを働かせることができませんでした。

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

Answer 1

クリック操作が最初のレベルを超えて機能しない理由は、2番目のレベルのツリーコンポーネント（内容配列内の1つ）が適切な小道具handleChildClickを渡さないためです。

クリックしたコンポーネントの各レイヤーに上から順に通知したいと正しく理解していますか？これを行うには、内容配列の内部にあるツリーコンポーネントの小道具を拡張する必要があります。親コンポーネントのクリックハンドラを受け取る必要があります。

ツリーコンポーネントは、実際に子をレンダリングする前に、コンポーネントのクリックハンドラを使用して各コンポーネントを拡張する必要があります。これは、関数を使用して行うことができますReact.cloneElement（API documentationおよびa more detailed discussionを参照）。これをあなたのコンポーネントに直接適用すると、コンポーネントの子を小道具に渡しているので、ちょっと混乱します。そのため、変更する小道具を特定する必要があります。異なるレイアウトのビットは、ここであなたに非常に多くの助けになります。

<Tree handleChildClick={this._handleChildClick}> 
     <Tree /> 
    </Tree> 

はよりよい私見を見て、構造がより明確になります。 this.props.childrenを介して内部コンポーネントにアクセスすることができ、cloneElementの使用がはるかに簡単になります。

だから、あなたのツリーコンポーネントで、あなたはこのようなレンダリング方法かもしれない：

render() { 
    const newChildren = this.props.children.map(child => 
    React.cloneElement(child, {onChildClick: this._handleChildClick})); 
    return (
    <div>{newChildren}</div> 
); 
} 

ので、私の第三、あなたは文字列とTree成分の混合物を持っている場合、このコードは動作しませんのでご注意くださいをし、最後の提案は、取り扱いを容易にするために、これらの文字列を非常に細いコンポーネントにラップすることです。あるいは、マップ内で型の比較を行うこともできます。