javascript - ReactJS:如何将组件附加到React中的App组件

Question

我试图在主“App”组件中附加一个由一些数组项组成的“Item”组件。但该组件正在被新的数组项替换，而不是被附加。以下是代码片段:

//the App render function
render: function() {
    return ( 
        <div> 
        {
            this.state.productDisplayed.map(function(product, i) {
                return ( 
                    <Item source = {product.url} prodId = {product.id}  key = {product.id} />
                )
            })
        }

        </div>
    )
}


//The Item render function
render: function(){
    return(
        <div className = "col-sm-4" >   
            <img src = {this.props.source} width = "70%" className = "img-responsive"></img>
            <div>{this.props.prodId} 
            </div>
        </div>
    )
}

“ProductDisplayed”是一个数组，它会被新项目替换，然后使用“for”循环显示这些新项目。

如何附加项目，就像我向主应用程序组件添加一些额外的项目一样。我正在尝试实现无限滚动。

Answer 1

为了将项目附加到您的应用组件，您需要将数据附加到您的 productDisplayed 状态数组

为此你可以做类似的事情

addItem=(item)=>{
     var productDisplayed=[...this.state.productDisplayed];
     productDisplayed.push(item);
     this.setState({productDisplayed});
} 

您可以在某些事件上调用此函数addItem。