如何将子组件嵌套到父组件中并导出？

Question

目标是嵌套组件和导出主题，同时保持 base 作为默认组件。

这是我想要生成的结果。

import Panel from './Panel';
...

<Panel> // important as it contains its own CSS.
    <Panel.Head>
        <h2>Some Header Text</h2>
    </Panel.Head>

    <Panel.Body>
        <p>Some Content...</p>
    </Panel.Body>

    <Panel.Footer>
        <button>Confirm action...</button>
    </Panel.Footer>
</Panel>

我找不到通过 JS 导出将 Head、Body、Footer 嵌套到父面板中的方法。

这是我目前所拥有的。

const Head = (props) => (
    <div className="panel--head">{props.children}</div>
);

const Body = (props) => (
    <div className="panel--body">{props.children}</div>
);

const Footer = (props) => (
    <div className="panel--footer">{props.children}</div>
);

const Panel = (props) => (
    <div className="panel">{props.children}</div>
);

export default Panel;
export { Head, Body, Footer };

我尝试的内容会导入到 import Panel, { Head, Body, Footer } from './Panel'; 中，而我正在努力避免。

这可能吗？如有任何建议，我们将不胜感激。

Answer 1

你想做的是不可能的因为我们无法渲染一个 Component 可能有像 Component.SubComponentA 这样的子组件，这里的解决方法是使用 render 道具API 这将允许单独导出每个组件和 Panel 组件以服务需要 sub-components 所以这里是方法：

const PanelRP = (props) => (
  <div className="panel">{props.children({ Head, Body, Footer })}</div>
);

我们将其渲染如下：

<PanelRP>
  {({ Head, Body, Footer }) => (
    <>
      <Head>head</Head>
      <Body>body</Body>
      <Footer>footer</Footer>
    </>
  )}
</PanelRP>

这个 api 可以解决您的问题吗？

如何将子组件嵌套到父组件中并导出？

How to nest children components into parent and export them?

javascript

export

reactjs