反應訪問渲染函數以外的組件

我有一個應用程序，在其中創建一個ajax請求，然後遍歷數據並創建一個HTML組件列表。我現在想要做的是分配onClick或ref值給他們，但我得到的錯誤「只有反應所有者可以參考」。反應訪問渲染函數以外的組件

這裏的代碼片段：

（當AJAX請求完成後調用呈現數據，環比數據，然後將它定義哪裏會出現在我的列表中dataHtml的狀態，我想在發生事件時引用「MyComponent」組件，但如果我嘗試應用任何類型的ref或onClick，則它們不起作用，因爲它們不在render函數中。如何在發生事件時訪問這些組件？）

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

來源

2017-09-05 user1157885

我不知道有關該錯誤的原因，但爲什麼不直接呈現在組件渲染功能呢？在該狀態下存儲組件不太常見。您通常將* data *存儲在狀態中。 –

@FelixKling我想這樣做，但我這樣做的原因是因爲我想在每次發出ajax請求時更新html，所以我認爲唯一的方法就是將其存儲在狀態中。我是否以錯誤的方式接近事物？ – user1157885

您只需在狀態中存儲Ajax響應。每當狀態改變時組件都會重新渲染。 –

不是將html元素存儲在狀態變量中，而是存儲api響應（數據）並在render方法內動態創建ui元素。

無論何時我們通過setState更新狀態值，都會自動重新呈現組件並使用新狀態值更新UI。

寫像這樣，通過這種方式，所有的UI邏輯會裏只渲染方法：

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

來源

2017-09-05 07:01:42

謝謝，我認爲這看起來像我在找的東西。直到今晚我都無法測試它，但我明白我的方式有什麼問題 – user1157885

你可以這樣做：

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

來源

2017-09-05 06:46:57 MukulSharma

反應訪問渲染函數以外的組件

回答

相關問題