导入默认反应组件具有两个或多个不同的名称

Question

我想做什么： 在一个文件中两次或多次导入相同的默认组件。我想要这样做的原因是因为组件是相同的，我只需要名称差异使其更具可读性。

我做了什么： 从'./input'导入ToInput; 从'./input'导入FromInput;

有没有正确的方法呢？它有效，但ESLint抱怨重复导入。

Answer 1

你不应该这样做。发布场景，了解您需要的原因。

这样做：

const FromInput = ToInput;

如果您确实需要，请暂停该文件的eslint规则。

/* eslint-disable import/your-rule-here */

Answer 2

import Input as MyInput from './input';
import Input as MySecondInput from './input';

现在您可以将组件用作MyInput或MySecondInput，因为它们都是同一组件的引用或实例。

Answer 3

您真正想要的是创建Input组件的两个不同实例，但您所描述的是创建{{ 1}}组件类/描述符。虽然可以这样做，但这通常是一种不好的做法。

尝试根据 面向对象的 概念来考虑React。请记住，来自“./input”（在您的情况下为Input）的导入构造是类，而不是该类的实例。

传统上要创建一个名为ToInput的类的实例，我们会写这样的东西：

Input

但是，在React中定义类var toInput = new Input() 的实例时，我们通常使用 JSX 标记：

Input

以上是JSX标记 <Input /> 的实例，而 NOT 实际上是Input类本身。

从我在你的问题中收集的内容来看，我认为以下是采用更好的模式和实践的更合适的方法。

导入一个单一的，通用的Input组件描述符/类。

Input

如果可读性是您的最终目标，那么可能使用 prop 来区分这两个组件，而不是创建组件类的副本。您可以使用import Input from './input' 道具，例如：

id

希望这能回答你的问题。