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

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"


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

Container.js：

import Box from "./Box.js"


state={
 data1: "something"  }

render () {
return (
  <main className="wrapper">
    <div className="row">
      <Box props1 = { this.state.data1 } //for example you pass data from this componens' state

    </div>
  </main>
);

Box.js：

render () {
const {props1, props2} = this.props // these are props to pass to parent component
return (
  <main className="wrapper">
    <div>{props1}</div> 
  </main>
);

如果要将孙子代组件的数据传递到上组件，则可以将道具传递到上一步，再次定义道具，然后将其传递到上一步。