时间戳

首页 > 解决方案 > 带有“子组件”的 ReactJS 组件

javascript - 带有“子组件”的 ReactJS 组件

问题描述

我对 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>

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

标签： javascripthtmlreactjs

解决方案

如果我理解正确，您需要多个占位符，而不仅仅是一个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>

推荐阅读