javascript - 将本地模块导入为带有子组件的组件

Question

我有一个可以“独立”工作的 React 组件。它允许子组件以“可编辑”状态进行(动态)编辑(editable = true 使子组件可编辑，editable = false 则不然)

import Editable from './editable'

<Editable>
  <div>edit me!</div>
</Editable>

在此组件旁边，我有一些“子组件”，可以用作“主组件”的子组件(可编辑)。当 Editable 的状态设置为“editable = true”时，可用于为其子级指定其他行为。我不想单独导入这些子组件。我知道一些实现此目的的方法，我将在问题下方指定它们。

但我正在寻找的是这样的语法:

import Editable from './editable'

<Editable>
  <div>edit me!</div>
  <Editable.Hide>
    <div>don't show me when editable</div>
  </Editable.Hide>
  <Editable.Not>
    <div>don't make me editable when editable</div>  
  </Editable.Not>
</Editable>

因此需要对导出进行结构化，以便使用默认导出将生成主组件，但(以某种方式)也可以通过相同的默认导出来访问子组件。

为什么？主要是我对可能性的好奇，我很想使用上面这样的语法。

那么是否可以构建一个能够使用类似语法的导出？

<小时/>

这些是我已经知道如何导入带有子组件的组件的方法:

import Editable from './editable'

<Editable.MainComponent>
  <div>edit me!</div>
  <Editable.Hide>
    <div>don't show me when editable</div>
  </Editable.Hide>
  <Editable.Not>
    <div>don't make me editable when editable</div>  
  </Editable.Not>
</Editable.MainComponent>

如果我只想要主要组件，我可以使用 editable 文件夹中的一些文件结构来完成此操作，并像这样导入:

import EditableMainComponent from './editable/mainComponent'

<EditableMainComponent>
  <div>edit me!</div>
</EditableMainComponent>

或者创建一个命名导出，仅在同一文件中包含主要组件。

import {EditableMainComponent} from './editable'

<EditableMainComponent>
  <div>edit me!</div>
</EditableMainComponent>

另一种方法是仅将主组件保留为默认导出，将子组件保留为命名导出。

我试图避免这样的使用:

import Editable, {EditableHide, EditableNot} from './editable'

<Editable>
  <div>edit me!</div>
  <EditableHide>
    <div>don't show me when editable</div>
  </EditableHide>
  <EditableNot>
    <div>don't make me editable when editable</div>  
  </EditableNot>
</Editable>

因为我不希望用户必须在导入中指定所有不同的子组件。所以也可以这样实现:

import { * as Editable } from './editable'

<Editable.default>
  <div>edit me!</div>
  <Editable.Hide>
    <div>don't show me when editable</div>
  </Editable.Hide>
  <Editable.Not>
    <div>Don't make me editable when editable</div>  
  </Editable.Not>
</Editable.default>

Answer 1

如果组件是自给自足的并且可以单独使用，最好将它们视为相同的值并将它们全部视为命名导出:

import {Editable, EditableHide, EditableNot} from './editable'

如果某些组件不应该与主组件分开使用，则可以将它们命名为主组件。

对于类组件:

class Not extends Component {...}

export default class Editable extends Component {
  static Not = Not;
  ...
}

对于功能组件:

const Not = props => ...;

const Editable = props => ...;
Editable.Not = Not;    

export default Editable;

最后一种方法的优点是，通过模拟或监视测试中的辅助组件来提高可测试性，只要它们被称为 Editable.Not 而不是 Not在 Editable 主组件内。

最后一种方法的缺点是次要组件无法进行树摇动，如果它们的占用空间很大并且通常可以在没有它们的情况下使用主要组件，则不应该这样做。