reactjs 无法在其他项目中使用导入HeadlessUI对话框的组件

6l7fqoea 于 2023-03-12 发布在 React

关注(0)|答案(2)|浏览(170)

我正在使用一个包含自定义Dialog组件的组件库，该组件使用@headlessui/react中的Dialog，问题是每当我尝试使用此组件时，都会收到以下错误：
警告：React创建元素：类型无效--应为字符串（对于内置组件）或类/函数（对于复合组件），但得到的是：您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。
./节点模块/@测试/用户界面组件/目录/ui-components.cjs.development.js/exports.TestDialog@http://localhost:3000/static/js/bundle.js:75318:13
这是组件如果有帮助的话

import { Dialog } from '@headlessui/react';
import React, { useState } from 'react';

export const TestDialog: React.FC = () => {
  let [isOpen, setIsOpen] = useState(true);

  return (
    <Dialog open={isOpen} onClose={() => setIsOpen(false)}>
      <p>
        Are you sure you want to deactivate your account? All of your data will
        be permanently removed. This action cannot be undone.
      </p>

      <button onClick={() => setIsOpen(false)}>Deactivate</button>
      <button onClick={() => setIsOpen(false)}>Cancel</button>
    </Dialog>
  );
};

我试过改变tsconfig文件，添加babel插件和多个东西，但似乎都不起作用。
这只发生在使用craco的项目中，但在其他NextJS项目中也有效。
任何帮助都很感激，谢谢

reactjs

来源：https://stackoverflow.com/questions/74140341/cant-use-components-importing-headlessui-dialog-in-a-different-project

2条答案

按热度按时间

j5fpnvbx1#

这通常发生在组件返回undefined时。可能对话框组件内的某个组件返回undefined。若要修复此问题，请检查所有return语句。必须至少在组件内返回null。
从

export Component = () => {
   return;
}

到

export Component = () => {
  return null
}

赞(0）回复(0）举报 2023-03-12

9vw9lbht2#

如果你看一下headless ui文档中的例子，你会发现它们把所有的对话框内容都 Package 在一个<Dialog.Panel>组件中。
如果不这样做，你会发现你的组件不会呈现任何东西，我相信这是导致你的错误。
如果你改变你的组件到下面我认为它应该工作。

import { Dialog } from '@headlessui/react';
import React, { useState } from 'react';

export const TestDialog: React.FC = () => {
  let [isOpen, setIsOpen] = useState(true);

  return (
    <Dialog open={isOpen} onClose={() => setIsOpen(false)}>
      <Dialog.Panel>
        <p>
          Are you sure you want to deactivate your account? All of your 
          data will be permanently removed. This action cannot be undone.
        </p>

        <button onClick={() => setIsOpen(false)}>Deactivate</button>
        <button onClick={() => setIsOpen(false)}>Cancel</button>
      </Dialog.Panel>
    </Dialog>
  );
};

赞(0）回复(0）举报 2023-03-12

我来回答

reactjs 无法在其他项目中使用导入HeadlessUI对话框的组件

2条答案

相关问题

热门标签

最新问答