在每次单击父组件时都会使用新道具将子组件添加到子组件

Question

我是个新手，所以不要用任何非技术性的词语。我有一个父组件，它在单击按钮时有一个按钮元素，调用一个函数来创建一个新对象。我想要的是，当用户单击这个按钮时，子组件应该呈现在父按钮元素下面，每次单击按钮时，新对象应该作为道具传递给子组件，以便它可以在屏幕上显示它，但以前调用的子组件应该保留在屏幕上。

从React导入；

class childcomponent extends React.PureComponent{
    state = { data: this.props.data }
        render(){
            return(
            <div>
                <span>Name: {this.state.data.name}</span>
                <span>Lastname: {this.state.data.lastname}</span>
            </div>
        )
    }
}

类父母组件扩展反应。PureComponent{

handleAddChild=(e)=>{
    e.preventDefault();
        //Here i form the object
        const user = {
        //key:value
        }
        //want to render child component from here
}

render(){
    return(
    <div>

    {/* //some code
    //some code
    //some code */}

    <button onClik={this.handleAddChild} >Save</button>

    {/* //want to render child component here </childcomponent> */}

    </div>
    );
}

}

Answer 1

在父组件中创建一个数组，并存储与父组件的State值相同的值，通过子组件中的数组将此数组作为道具传递给子组件循环，以获得尽可能多的列表组件

子组件

let List=this.props.data.map(item=>(
<div>
                <span>Name: {this.state.data.name}</span>
                <span>Lastname: {this.state.data.lastname}</span>
            </div>
))
        render(){
            return(
            <List/>
        )
    }
}````

Answer 2

在react中，您需要考虑您的JSX（HTMLJS）已经准备好显示子组件，并且只等待状态显示它。首先，您需要父组件的状态和一些空对象state={child:{}）

然后在渲染方法中

{!!this.state.child && <Childcomponent data={this.state.child}}

然后添加方法

addChild = () => this.setState({ child: {name: 'Hi', surname: 'Hello'} })

Answer 3

这里有一个让孩子们进入状态的技巧

this.state = {
 children: []
}

然后循环渲染

renderChildren = () => {
return this.state.children.map(item => {
   return <Child  />
})

}

并添加子项

handleAddChild=(e)=>{
    e.preventDefault();
        //Here i form the object
        const user = {
        //key:value
        }
   this.setState({children: [...this.state.children, user]})
}