Reagieren auf Komponenten außerhalb der Renderfunktion

Question

Ich habe eine Anwendung, wo ich eine Ajax-Anfrage machen und dann die Daten durchlaufen und eine Liste von HTML-Komponenten erstellen. Was ich jetzt versuche, ist, ihnen OnClick- oder Ref-Werte zuzuweisen, aber ich bekomme den Fehler "Nur React-Besitzer können Refs haben".

Hier ist ein Ausschnitt aus dem Code.

(Wenn die Ajax-Anforderung abgeschlossen nennt es Daten übertragen, Schleifen über die Daten und setzt dann den Zustand des dataHtml, die, wo meine Liste definiert wird angezeigt Ich möchte um auf die "MyComponent" -Komponenten zu verweisen, wenn ein Ereignis eintritt, aber wenn ich versuche, einen beliebigen Typ von ref oder onClick auf sie anzuwenden, funktioniert das nicht, weil sie nicht innerhalb der Renderfunktion sind. Wie kann ich auf diese Komponenten zugreifen, wenn dieses Ereignis eintritt? ?)

renderData(data) 
{ 
    var html = []; 

    for (var i = 0; i < data.length; i++) { 
     html.push(
      <MyComponent key={ i } /> 
     ); 
    } 

    this.setState({ 
     dataHtml: html 
    }); 
} 

render() { 
    return (
     <div ref="data"> 
      { this.state.dataHtml } 
     </div> 
    ); 
} 

Answer 1

Anstatt die HTML-Elemente in einer Statusvariablen zu speichern, speichern Sie die API-Antwort (Daten) und erstellen Sie die ui-Elemente dynamisch in der Rendermethode.

Immer wenn wir den Statuswert mit setState aktualisieren, wird automatisch die Komponente neu gerendert und das ui mit neuen Statuswerten aktualisiert.

schreibt es so, auf diese Weise die all ui Logik innerhalb Render-Methode nur sein:

class App extends React.Component{ 
    constructor(){ 
     super(); 
     this.state = { 
      data: [] 
     } 
    } 

    componentDidMount(){ 
     /* 
      ajax call and do setState once get the data, like this: 
      this.setState({ 
       data: response 
      }); 
     */ 
    } 

    _renderElements(){ 
     return this.state.data.map((el,i) => <MyComponent key={i} />) 
    } 

    render() { 
     return (
      <div> 
       { this._renderElements() } 
      </div> 
     ); 
    } 
} 

Answer 2

Sie können wie folgt tun:

constructor() 
{ 
this..handleClick(i) = this.handleClick(i).bind(this); 
} 

handleClick(i) 
{ 
....... 
} 

    renderData(data) 
    { 
     var html = []; 

     for (var i = 0; i < data.length; i++) { 
      html.push(
       <MyComponent key={ i } onClick = this.handleClick(i) /> 
      ); 
     }  
     return html; 
    } 

    render() { 
     return (
      <div ref="data"> 
       { this.state.dataHtml } 
      </div> 
     ); 
    }