Question

我有一个应用程序，我在其中发出ajax请求，然后循环数据并创建HTML组件列表。我现在要做的就是给他们分配onClick或ref值，但是我得到了错误＆＃34;只有React所有者可以拥有refs＆＃34;。

以下是代码片段：

（当ajax请求完成时，它调用渲染数据，遍历数据，然后设置dataHtml的状态，定义我的列表将出现的位置。我想引用＆＃34; MyComponent＆＃34 ;事件发生时的组件，但如果我尝试将任何类型的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>
        );
    }
}

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

React访问render函数之外的组件

2 个答案: