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