Reagentの代議員パターン - それを達成する方法は？

Question

私は主にC++の開発者ですが、Reactで「Delegate」として何かを作成するにはどうすればいいか分かりません。

私が達成したいこと：カスタムコンポーネントをテーブルセルのデータを正しく編集するために必要なコードを持つテーブルコンポーネントに渡します。私mainAppです上の

：

<TableComponent 
    headerData=["first", "second", "third"] 
    rowEditDelegates=[<input/>, <button></button>, <combobox/>] 
/> 

コードがbrievetyためのはるかに短いです。

class TableComponent extends React.Component { 
    constructor(props) { 
     super(props) 
     this.state = { 
      editDelegates = this.props.rowEditDelegates; 
      displayEditors = false; 
     } 

     onEditToogled() { 
      /* Here I have no idea how to get the editDelegates 
       and pass data to it. */ 
      setState({displayEditors : true}); 
     } 
    } 

    render() { 
     let row = null; 
     if(this.state.displayEditors) { 
      row = this.state.editDelegates.map((item) => <td> {item} </td>) 
     } else { 
      row = this.props.bodyData.map((item) => <td> {item} </td>) 
     } 
    } 
}; 

、多分私の問題のニーズ、それはレンダリングコンポーネントだ、と私は（それが存在する場合、私も知りません）コンポーネント「ポインタ」と連携する方法を理解していなかったので、私は、デリゲートのメソッドにアクセスすることはできません

C++プログラマーとは異なる考え方をしています。例えば、

onEditToogled() 
{ 
    setState({displayEditors : true}); 
} 

render() 
{ 
    let row = null; 
    if(this.state.displayEditors) 
    { 
     row = this.state.editDelegates.map((item) => { 
      var alteredElement = React.cloneElement(item, {className: "newPropertyValue"}); 
      return (<td> {alteredElement} </td>); 
     }); 
    } 
    else 
    { 
     row = this.props.bodyData.map((item) => <td> {item} </td>) 
    } 
} 

2）に変更し、エディタコンポーネントを渡す方法方法：

1）を使用しcloneElement機能：

Answer 1

あなたはここにオプションのカップルを持っている

<TableComponent 
    headerData=["first", "second", "third"] 
    rowEditDelegates=[(props) => <input {...props}/>, (props) => <button {...props}/>, (props) => <combobox {...props}/>] 
/> 

それ以降：

render() { 
    let row = null; 
    if(this.state.displayEditors) { 
     row = this.state.editDelegates.map((itemFunc) => <td> {itemFunc({className: "newPropertyValue"})} </td>) 
    } else { 
     row = this.props.bodyData.map((itemFunc) => <td> {itemFunc()} </td>) 
    } 
} 

補足として。

"代理人"をコピーして保持する必要はないと思います。彼らは変わることはまずありませんか？もしそうなら、それらを小道具に残してください。