javascript - 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 响应(数据)并在 render 方法中动态创建 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>
        );
    }
}