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

具有“子组件”的ReactJS组件

2 个答案: