javascript - React 访问渲染函数之外的组件

Question

我有一个应用程序，我在其中发出 ajax 请求，然后循环数据并创建 HTML 组件列表。我现在想做的是将 onClick 或 ref 值分配给它们，但我收到错误“只有 React 所有者才能拥有 ref”。

这是代码片段:

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