React 功能组件，如何为每个文件导出多个组件

Question

我需要为同一页面导出不同的组件，因为它们充当渲染其他组件的配置，我\xc2\xb4m 新来反应，所以我努力寻找解决方案。这是一个codesandbox，其中包含我想要实现的目标的简单示例： https://codesandbox.io/s/adoring-elion-fq4zt ?file=/src/App.js

\n

谢谢！

\n

---- 编辑 ----

\n

感谢您的所有答案，感谢您意识到我在组件命名中存在拼写错误，这就是我之前的尝试不起作用的原因。

\n

我把更新后的codesandbox留在这里，因为它可能对其他人有用：

\n

Answer 1

要导出模块中的多个组件，只需执行以下操作：

export const ComponentOne = () => <span>Some content for ComponentOne</span>;

export const ComponentTwo = () => <span>Some content for ComponentOne</span>;

然后，当您需要导入这些组件时，只需执行以下操作：

import { ComponentOne, ComponentTwo } from "./path/of/components"

请注意，导入是带有的，{}因为默认情况下不会导出组件。

另一方面，如果您的文件中只有一个组件，您可以简单地执行以下操作：

const Component = () => <span>Some content for Component</span>;

export default Component;

并且比默认导入，不带{}如下例所示：

import Component from "./path/of/components"