Delegiertenmuster in Reagieren - wie erreicht man es?

Question

Ich bin hauptsächlich ein C++ Entwickler und es fällt mir schwer zu verstehen, wie ich etwas als 'Delegierter' in React erstellen kann.

Was ich erreichen möchte: Übergeben Sie eine benutzerdefinierte Komponente an eine Tabellenkomponente, die über den erforderlichen Code verfügt, um die Daten in einer Tabellenzelle ordnungsgemäß zu bearbeiten.

auf meinem MainApp:

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

Der Code ist viel kürzer für 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>) 
     } 
    } 
}; 

ich nicht die Methoden des Delegat zugreifen, da sie eine gerenderte Komponente ist, und ich verstand nicht, wie mit einer Komponente „Zeiger“ arbeiten (ich weiß nicht einmal, wenn es vorhanden ist), vielleicht mein Problem Bedürfnisse eine andere Denkweise als ein C++ Programmierer.

Answer 1

Sie haben einig Möglichkeiten:

1) Verwenden Sie cloneElement Funktion:

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) ändern Sie die Art und Weise, wie Sie die Editor-Komponenten passieren, zum Beispiel:

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

Und später:

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>) 
    } 
} 

Als eine Randnotiz.

Ich glaube nicht, dass Sie Ihre "Delegierten" kopieren und behalten müssen. Sie werden sich wahrscheinlich nicht ändern? Wenn ja, lass sie einfach in Requisiten.