Импорт пакета дочернего компонента с пакетом родительского компонента

Question

Я видел некоторые используемые компоненты, как пример ниже

import Parent from 'Parent';

<Parent.Child/>
...or...
<Parent>
    <Parent.Child/>
</Parent>

Как мне структурировать пакет, чтобы я мог это сделать? Плюс, как мне назвать такую ​​структуру?

Answer 1

Ответ находится в Здесь .

TL; DR, родительский элемент является регулярным компонентом, а дочерние элементы являются c свойствами родительского класса

Если Вы хотите сделать это для функциональных компонентов, вы можете сделать что-то вроде:

function Child() {
  return <div>this is a child</div>
}

function Parent() {
  return <div>this is a parent</div>
}

Parent.Child = Child;  // assign the child as a property of the parent function

function App() {
  return (
    <div className="App">
      <Parent/>
      <Parent.Child/>
    </div>
  );
}