javascript - 带有 "sub-components"的 ReactJS 组件

Question

我是 ReactJS 的新手，开始制作这样的组件:

class Row extends React.Component {
    render() {
        return (
            <div className={"row w-100 ml-0 mr-0 " + this.props.className}>
                {this.props.children}
            </div>
        );
    }
}

我现在想要实现的是这个组件有“子组件”(我不知道正确的词)之类的或类似的东西。

我是否必须为此创建另一个组件，或者是否可以在一个组件中实现它？

编辑:

我有这个组件，里面已经有 child :

<div className="custom-card">
    <Card>
        <CardHeader onClick={this.toggle} className={"card-header " + ((!this.props.readOnly && this.props.headerCtrl) && "pt-0")}>
            <CardTitle className="card-title d-flex justify-content-between">
                <p>{this.props.title}</p>
            </CardTitle>
        </CardHeader>
        <Collapse isOpen={this.state.collapse}>
            <CardBody className="card-body">
                {this.props.children}
            </CardBody>
        </Collapse>
    </Card>
</div>

但我还希望用户可以指定应在卡片页眉中显示哪个组件。这样不仅可以有<p>还有一个<input>等等。

Answer 1

如果我没理解错的话，您需要多个占位符，而不仅仅是一个 children .幸运的是，React 元素只是 JavaScript 对象，您可以将它们作为 props 传递。

当您的组件 ( <CustomCard>) 具有与您问题中的渲染方法相同的渲染方法时(未更改):

<div className="custom-card">
  <Card>
    <CardHeader onClick={this.toggle} className={"card-header " + ((!this.props.readOnly && this.props.headerCtrl) && "pt-0")}>
      <CardTitle className="card-title d-flex justify-content-between">
        <p>{this.props.title}</p>
      </CardTitle>
    </CardHeader>
    <Collapse isOpen={this.state.collapse}>
      <CardBody className="card-body">
        {this.props.children}
      </CardBody>
    </Collapse>
  </Card>
</div>

您可以像这样为标题传递自定义组件:

<CustomCard title={<SpecialTitle>My special title</SpecialTitle>}>
  My card body!
</CustomCard>