将本地模块作为带有子组件的组件导入答案

【问题标题】：Import a local module as component with sub components将本地模块作为带有子组件的组件导入
【发布时间】：2019-10-02 22:13:33
【问题描述】：

我有一个“独立”工作的 React 组件。它允许子组件在“可编辑”状态下（动态）可编辑（editable = true 使子组件可编辑，editable = false 不能）

import Editable from './editable'

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

在这个组件旁边，我有一些“子组件”可以用作“主组件”的子组件（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>

【问题讨论】：

嗨！我注意到有人对我的问题投了反对票。我想知道为什么，以后不会再犯类似的错误了！
我不是投反对票的人——但从票数接近的情况来看，有人认为，正如目前所写的那样，很难准确说出你在问什么
谢谢！我会试着重写一下，让它变得更清楚。
如果 Hide 和 Not 是浅容器并且不应该在 Editable 之外使用，则将它们设为 Editable 属性就可以了。否则，最好将它们作为单独的导出。
在定义组件的某个点应该有Editable.Not = Not。

标签： javascript reactjs

【解决方案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 主要组件中被称为 Editable.Not 而不是 Not。

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

【讨论】：