React 訪問渲染函數之外的組件

Question

我有一個應用程序，我在其中發出 ajax 請求，然后遍歷數據並創建 HTML 組件列表。 我現在要做的是為它們分配 onClick 或 ref 值，但出現錯誤“只有 React 所有者可以擁有 refs”。

這是代碼的一個片段：

（當 ajax 請求完成時，它調用渲染數據，循環數據，然后設置 dataHtml 的狀態，它定義了我的列表將出現的位置。我想在事件發生時引用“MyComponent”組件，但如果我嘗試將任何類型的 ref 或 onClick 應用於它們都不起作用，因為它們不在渲染函數中。發生所述事件時如何訪問這些組件？）

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

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

每當我們通過 setState 更新狀態值時，react 會自動重新渲染組件並使用新的狀態值更新 ui。

像這樣寫，這樣所有的 ui 邏輯都將只在 render 方法中：

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

你可以這樣做：

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