如何在组件内添加相同的组件

Question

我尝试在下面执行任务，但我被卡住了，我如何以一种可以在组件内部嵌套相同组件的方式构建我的组件。

App.js 文件

render () {
return (
  <main className="wrapper">
    <div className="row">
      <Container addBox = { this.addBox } 
                 boxes = {this.state.containers} 
                 changeColor={this.changeColor}
                 addContainer = {this.addContainer}
                 containers={this.state.containers}/>
    </div>
  </main>
);

}

Answer 1

就像您在 app.js 中添加 Container 一样，创建 Box 组件并将其添加到 Container.js 中，像在此一样设置道具，如下所示：

import Container from "./Container.js"

state={ data1 : "something" }

render () {
return (
  <main className="wrapper">
    <div className="row">
      <Container addBox = { this.addBox } 
                 propsAgain={this.state.data1}
                 changeColor={this.changeColor}
                 addContainer = {this.addContainer}
                 containers={this.state.containers}/>
    </div>
  </main>
);

容器.js：

import Box from "./Box.js"



render () {
const{propsAgain}=this.props // we pass it upper again
return (

    <div className="row">
      <Box props1 = {propsAgain}  
    </div>

);

Box.js：

render () {
const {props1, props2} = this.props // these are props to pass to parent component
return (

    <div>{props1}</div> 

);

如果要将孙子组件的数据传递给上层组件，可以将props传递给上一级，再次定义props并再次将其传递给上一级