将多个组件作为一个组件从react中的同一个文件导出

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 function...。

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

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