Question

我有一个模态组件，它触发打开模态，内容进入模态。

<Modal>
  <button className="btn btn--primary">Open modal</button>
  <div>
    <p>Modal content</p>
    <p>More modal content</p>
  </div>
</Modal>

在Modal组件中：

  return (
    <div className="Modal">
      {props.children[0]}
      <div className="Modal__container">
        <div className="Modal__header">
          <button className="Modal__close btn btn--secondary btn--small">
            Close
          </button>
          <h1 className="Modal__heading">Here is my modal</h1>
        </div>
        <div className="Modal__content">{props.children[1]}</div>
      </div>
    </div>
  );

这是有效的但非常脆弱，因为我在props.children上使用索引。我可以改为命名我传递给Modal的组件吗？如下所示：

<Modal>
  <Modal.Trigger>
    <button className="btn btn--primary">Open modal</button>
  </Modal.Trigger>
  <Modal.Content>
    <p>Modal content</p>
    <p>More modal content</p>
  </Modal.Content>
</Modal>

Answer 1

我建议你改用道具：

声明你的模态：

<Modal action={<button className="btn btn--primary">Open modal</button>}>
  <div>
    <p>Modal content</p>
    <p>More modal content</p>
  </div>
</Modal>

然后你的渲染方法看起来像

return (
  <div className="Modal">
    {props.action}
    <div className="Modal__container">
      <div className="Modal__header">
        <button className="Modal__close btn btn--secondary btn--small">
          Close
        </button>
        <h1 className="Modal__heading">Here is my modal</h1>
      </div>
      <div className="Modal__content">{props.children[1]}</div>
    </div>
  </div>
);

Answer 2

您可以使用布尔标志标记您的孩子，该标志将作为名称。

在Modal内，您会发现孩子标记为trigger且孩子标记为content：

// within Modal
render() {
  let trigger, content;
  React.Children.forEach(this.props.children, child => {
    if (!child) return;
    if (child.props.trigger) { trigger = child }
    if (child.props.content) { content = child }
  })

  return (
    <div className="Modal">
      {trigger}
      <div className="Modal__container">
        <div className="Modal__header">
          <button className="Modal__close btn btn--secondary btn--small">
            Close
          </button>
        <h1 className="Modal__heading">Here is my modal</h1>
      </div>
      <div className="Modal__content">
        {content}
      </div>
    </div>
  )
}

在渲染Modal时标记相应的子项：

<Modal>
  <button trigger className="btn btn--primary">Open modal</button>
  <div content>
    <p>Modal content</p>
    <p>More modal content</p>
  </div>
</Modal>

我们编写了一个名为seapig的库，您可能会发现这个用例很有用。

在React组件中渲染命名子项？

2 个答案: