Javascript 使用React.JS将内容填充到容器中

我有一个容器元素，它也是一个React组件，具有特定的高度。我还有一个API，它根据请求的ID返回可变长度的内容块

<Contents/>

我想从API请求一个新的内容块，直到容器溢出为止

我的代码可以工作，但它会重新渲染所有内容块，并在每个渲染中添加一个，直到容器已满。这似乎是一个糟糕的方法

class Contents extends React.Component {

    constructor() {
        super();

        this.state = {
            numElements: 0
        };
    }

    render() {
        const elements = [];
        for(let i = 0; i < this.state.numElements; i++) {
            elements.push(this._getElementContents(i));
        }

        return(<div id="contents">
            {elements.map(element => element)}
        </div>);
    }


    componentDidMount() {
        // start the 'filling loop'
        this._addElement();
    }

    componentDidUpdate() {
        // keep adding stuff until container is full
        if(document.getElementById('contents').clientHeight < window.outerHeight - 400) {
            this._addElement();
        }
    }

    _addElement() {
        // setState will cause render() to be called again
        this.setState({numElements: this.state.numElements + 1});
    }

    _getElementContents(i) {
        // simplified, gets stuff from API:
        let contents = api_response;
        return(<Element key={i} body={contents} />);
    }
}

类内容扩展了React.Component{
构造函数（）{
超级（）；
此.state={
数值：0
};
}
render（）{
常量元素=[]；
for（设i=0；ielement）}
);
}
componentDidMount（）{
//启动“填充循环”
这个；
}
componentDidUpdate（）{
//继续添加材料，直到容器装满为止
if（document.getElementById（'contents'）.clientHeight

---

如何将元素添加到容器中，直到容器被填充为止，而无需重新添加、重新查询API并重新呈现每个循环中的现有元素？

我看不出您是如何调用API的，或者在什么条件下调用的。根据我的理解，你应该做两件事

将

元素

数组保持在

状态

对象中，并在新元素到达时推送它们

使用具有相同条件的

shouldComponentUpdate

而不是

componentdiddupdate

来判断何时必须从API请求更多元素

---

最终绘制

状态.elements

。每当您收到一个新的组件时，您只需使用以前获得的本地元素重新绘制组件，而不是重新进行所有API调用

我看不出您是如何调用API的，或者在什么条件下调用的。根据我的理解，你应该做两件事

将

元素

数组保持在

状态

对象中，并在新元素到达时推送它们

使用具有相同条件的

shouldComponentUpdate

而不是

componentdiddupdate

来判断何时必须从API请求更多元素

最终绘制

状态.elements

。每当您收到一个新的组件时，您只需使用以前获得的本地元素来重新绘制组件，而不是再次进行所有API调用

，因为这个.setState（）会触发重新渲染，正如dimitrisk所说，您应该在shouldComponentUpdate中放入逻辑，以便在一切准备好进入DOM后才进行渲染

您应该在React中查看动态的孩子。它有助于在重新渲染时进行协调

因为这个.setState（）会触发重新渲染，就像dimitrisk说的那样，您应该在shouldComponentUpdate中加入逻辑，以便只有在一切都准备好进入DOM后才进行渲染

您应该在React中查看动态的孩子。它有助于在重新渲染时进行协调

---

在本例中。_getElementContents（）我使用jQuery进行了一个Ajax调用，但为了简化示例，我给出了这个调用。我会试试你的建议，谢谢！我无法使用

shouldComponentUpdate

向

状态添加更多元素。元素

数组，因为您无法在

shouldComponentUpdate

中使用

setState

。还有其他想法吗？

shouldComponentUpdate:function（nextrops，nextState）{return document.getElementById（'contents'）.clientHeight

，因此，

componentdiddupdate

只有在这时才会被触发，这样您才能安全地更改

componentdiddupdate

以删除

if

语句，如下所示：

componentdiddupdate:function（）{this.\u addElement（）；}

。\u getElementContents（）我使用jQuery进行了一个Ajax调用，但为了简化示例，我将其公开。我会试试你的建议，谢谢！我无法使用

shouldComponentUpdate

向

状态添加更多元素。元素

数组，因为您无法在

shouldComponentUpdate

中使用

setState

。还有其他想法吗？

shouldComponentUpdate:function（nextrops，nextState）{return document.getElementById（'contents'）.clientHeight

，因此，

componentdiddupdate

只有在这样的情况下才会被触发，这样您才能安全地更改

componentdiddupdate

以删除

if

语句：

componentdiddupdate:function（）{this.\u addElement（）；}