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

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 中，按照您在本例中所做的那样设置 props，如下所示:

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，再传递给上一级