我尝试执行下面的任务,但我被卡住了,如何以一种可以在组件内嵌套相同组件的方式构建我的组件。
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>
);
}
最佳答案
就像您在 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,再传递给上一级
关于javascript - 如何在组件内添加相同的组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59541255/