在父组件的 onClick 上一次又一次地添加子组件，每次使用新的道具到子组件

Posted 2023-02-21

【中文标题】在父组件的 onClick 上一次又一次地添加子组件，每次使用新的道具到子组件

【英文标题】：Adding child component on onClick of parent component again and again with new prop every time to child comp

【发布时间】：2020-01-11 22:40:31

【问题描述】：

我是新手，所以请忍受任何非技术性的话。我有一个父组件，它在按钮的 onClick 上有一个按钮元素，调用一个函数来创建一个新对象。当用户单击此按钮时，我也想要发生子组件应呈现在父按钮元素下方，并且每次单击按钮时，应将新对象作为道具传递给子组件，以便它可以在屏幕上显示它，但以前称为子组件应保留在屏幕上。

从“反应”导入反应；

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

类父组件扩展 React.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>
    );

【参考方案1】：

下面是您的问题的工作代码和codesandbox link:-

App.jsx

import React from "react";
import ReactDOM from "react-dom";
import ChildComponent from "./Child";

import "./styles.css";

class App extends React.Component 
  state = 
    user: [
       name: "name1", lastname: "lastname1", key: 1 ,
       name: "name2", lastname: "lastname2", key: 2 ,
       name: "name3", lastname: "lastname3", key: 3 
    ],
    data: [],
    count: 0
  ;
  handleAddChild = e => 
    e.preventDefault();
    this.setState(
      data: [...this.state.data, this.state.user[this.state.count]],
      count: this.state.count + 1
    );
  ;
  render() 
    console.log("data", this.state.data);
    return (
      <div className="App">
        <button onClick=this.handleAddChild>Save</button>
        this.state.data.length &&
          this.state.data.map(item => 
            return <ChildComponent data=item />;
          )
      </div>
    );
  


const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Child.js

import React from "react";

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


export default childcomponent;

希望对你有帮助！！！

【参考方案2】：

在父组件中创建一个数组并存储与父组件的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/>
        )
    
````

【参考方案3】：

在反应中，您需要以某种方式思考，您的 JSX(html+js) 已经准备好显示子组件并且只等待状态显示它。首先，您将需要带有一些空对象的父组件的状态 state = child: )

然后在你的渲染方法中

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

然后是你的添加方法

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

【参考方案4】：

这里有个技巧 为孩子创造一个状态

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])