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

Evanss 发表于 Dev

埃文斯

我有一个模态组件，它需要一个触发器来打开模态，并将内容放入模态内部。

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

这是有效的，但由于Im在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>

克鲁格霍

我建议您改用道具：

像这样声明您的模态：

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

然后您的render方法将看起来像

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。