Javascript 在React组件中呈现命名子级？

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

<Modal>
  <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.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[0]}
接近
这是我的信
{props.children[1]}
);

这是工作，但非常脆弱，因为我使用的道具上的索引。儿童。我可以改为命名传递给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>

开放模态
模态内容

更多模态内容

我建议您改用道具：

请这样声明您的身份：

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

返回(
{props.action}
接近
这是我的信
{props.children[1]}
);

您可以使用一个布尔标志来标记您的孩子，该标志将用作名称

在

模式中

可以找到标记为

触发器的子项

和标记为

内容的子项

：

// 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>
  )
}

---

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

当我使用console.log（React.Children）时，我可以看到我可以访问长度为3的forEach，但是当我按原样使用代码时，我的组件是未定义的。这不会记录任何内容：React.Children.forEach（child=>{console.log（'something'）；}）@Evans我忘了传递子项，修复了警告：React.createElement:类型无效--需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：objectWarning:只能更新已装入或正在装入的组件。这通常意味着您在未安装的组件上调用setState、replaceState或forceUpdate。这是禁止操作。请检查ReactMeteorDataComponent组件的代码。

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