Question

我有一个容器元素，它也是一个具有特定高度的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} />);
    }
}

如何在填充元素之前将元素追加到容器中，而无需重新添加，重新查询API并重新渲染每个循环上的现有元素？

Answer 1

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

将elements数组保留在state对象中，并在它们到达时推送新元素。

使用具有相同条件的shouldComponentUpdate代替componentDidUpdate来判断何时需要从API请求更多元素。

最终绘制state.elements。每当您收到一个新元素时，您只需使用先前重新绘制组件的本地元素，而不是重新进行所有API调用

Answer 2

因为this.setState（）触发了重新渲染，就像dimitrisk所说的那样，你应该在shouldComponentUpdate中放置逻辑，只有在你准备好了所有东西后才能渲染到DOM。

你应该在React中研究动态儿童。它有助于React在重新呈现http://facebook.github.io/react/docs/multiple-components.html#dynamic-children时进行对帐 http://revelry.co/dynamic-child-components-with-react/

使用React.JS填充包含内容的容器

2 个答案: