Question

我有一个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>

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，就可以通过模拟或监视测试中的辅助组件来提高可测试性。

后一种方法的缺点是次要组件不能摇晃，万一它们的占用空间很大并且主要组件可以在没有它们的情况下使用，则不应该这样做。

将本地模块作为具有子组件的组件导入

1 个答案: