Блог

Цель состоит в том, чтобы вложить компоненты и экспортировать тему, сохраняя базовый компонент в качестве компонента по умолчанию.

Вот результат, который я хочу получить.

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

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

    <Panel.Body&&t;
        <p&&t;Some Content...</p&&t;
    </Panel.Body&&t;

    <Panel.Footer&&t;
        <button&&t;Confirm action...</button&&t;
    </Panel.Footer&&t;
</Panel&&t;
  

Я не могу найти способ вложить Head, Body, Footer в родительскую панель с помощью JS exports.

Это то, что у меня есть на данный момент.

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

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

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

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

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

То, что я пробовал, будет импортировано в import Panel, { Head, Body, Footer } from './Panel'; , чего я пытаюсь избежать.

Возможно ли это вообще? Будем признательны за любой совет.

То, что вы хотите сделать, невозможно, поскольку мы не можем визуализировать, Component который мог бы иметь такие подкомпоненты, как Component.SubComponentA , обходным путем здесь является использование render props API, который позволит экспортировать каждый компонент отдельно и Panel компонент для обслуживания необходимых подкомпонентов, поэтому вот подход:

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

И мы визуализируем это следующим образом:

 <PanelRP&&t;
  {({ Head, Body, Footer }) =&&t; (
    <&&t;
      <Head&&t;head</Head&&t;
      <Body&&t;body</Body&&t;
      <Footer&&t;footer</Footer&&t;
    </&&t;
  )}
</PanelRP&&t;
  

может ли этот API решить вашу проблему?