在反应中从同一个文件中将多个组件导出为一个

Question

有人可以帮我实现几个组件的导出

import { Card, Text } from "@nextui-org/react";

export default function App() {
  const MockItem = ({ text }) => {
    return (
      <Card css={{ h: "$20", $$cardColor: '$colors$primary' }}>
        <Card.Body>
          <Text h6 size={15} color="white" css={{ m: 0 }}>
            {text}
          </Text>
        </Card.Body>
      </Card>
    );
  };

Answer 1

您可以从一个文件中导入所有模块，然后对其进行解构以获得您需要的内容。

import * as multipleComponents from "@nextui-org/react";

const { Card, Text } = multipleComponents;

Answer 2

只能有一个export default ，但可以有多个export const

例如

export default function ...

export const MyOtherComponent = () => ...

您可以将export const...换成 export export function...如果您愿意。

然后将它们导入另一个文件 -

import MyDefaultComponent, { MyOtherComponent } from '../path-to-components'