带有“子组件”的 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>
        );
    }
}

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

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

编辑：

我有这个组件里面已经有子组件：

<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 对象，您可以将它们作为道具传递。

当您的组件 (<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>

Answer 2

您可以使用高阶组件 (HOC) 来提供自定义组件，同时保持其他部分不变。您的用例的典型 HOC 如下所示

const HeaderHOC = (Component) => {
    return class extends React.Component {
       render() {
           <div className="custom-card">
                <Card>
                    <CardHeader onClick={this.toggle} className={"card-header " + ((!this.props.readOnly && this.props.headerCtrl) && "pt-0")}>
                        <Component {...this.props} />
                    </CardHeader>
                    <Collapse isOpen={this.state.collapse}>
                        <CardBody className="card-body">
                            {this.props.children}
                        </CardBody>
                    </Collapse>
                </Card>
            </div>
       }
    }
}

当你想使用这个 HOC 时，你可以这样做

const CardTitleComp = (props) => (
     <CardTitle className="card-title d-flex justify-content-between"><p>{props.title}</p></CardTitle>   
)

const CustomComp = HeaderHOC(CardTitleComp);