元素类型无效：需要一个字符串（对于内置组件），我导入的方式似乎不错

Question

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

我知道这个错误很常见而且很容易修复，但我仍然找不到我的错误。

我在包含组件 ProcessModal 时得到了这个元素

在我的组件上

export const CreateProcessButton = ({ selectedIds }) => {

  const [showProcessModal, setShowProcessModal] = useState(false);
  // const refresh = useRefresh();
  // const notify = useNotify();
  // const unselectAll = useUnselectAll();

  return (
    <Button
      label="Dupliquer la séléction sur ..."
      onClick={() => setShowProcessModal(true)}
    >
      <ProcessModal open={showProcessModal} {...selectedIds}/>

      {/*</ProcessModal>*/}
      <SyncIcon />
    </Button>
  );
};

我是这样导入ProcessModal的

import ProcessModal from './processModal';

来自同一目录中的文件 processModal.jsx。

processModal.jsx内容：

import React, {useState} from "react";
import Modal from 'react-modal';

const ProcessModal = (selectedIds, open) => {
  const customStyles = {
    content : {
      top                   : '50%',
      left                  : '50%',
      right                 : 'auto',
      bottom                : 'auto',
      marginRight           : '-50%',
      transform             : 'translate(-50%, -50%)'
    }
  };

  var subtitle;
  const [showProcessModal,setShowProcessModal] = useState(open);

  function afterOpenModal() {
    // references are now sync'd and can be accessed.
    subtitle.style.color = '#f00';
  }

  function closeModal(){
    setShowProcessModal(false);
  }

  return (
    <Modal
      isOpen={showProcessModal}
      onAfterOpen={afterOpenModal}
      onRequestClose={closeModal}
      style={customStyles}
      contentLabel="Example Modal"
    >
      <h2 ref={_subtitle => (subtitle = _subtitle)}>Hello</h2>
      <button onClick={closeModal}>close</button>
      <div>I am a modal</div>
      <form>
        <input />
        <button>tab navigation</button>
        <button>stays</button>
        <button>inside</button>
        <button>the modal</button>
      </form>
      {/*<SelectField choices={[*/}
      {/*  { id: 'M', name: 'Male' },*/}
      {/*  { id: 'F', name: 'Female' }*/}
      {/*]}*/}
      />
    </Modal>
  );
};

export default ProcessModal;

你知道我为什么会出现这个错误，或者我可以通过什么方式找到问题，因为这个错误没有给我任何指示。

Answer 1

React 组件需要一个 props 对象作为参数。您在定义 PostModal 组件 signutare 时所做的事情有点奇怪，因为它既不期望单个 porps 对象也不将其分解为内部变量，而是期望两个参数。

试试这个：

// here we destruct the props object in the variables you expect being inside
const ProcessModal = ({ selectedIds, open }) => { ... }

使用组件时也试试这个：

<ProcessModal open={showProcessModal} selectedIds={selectedIds}/>

元素类型无效：需要一个字符串（对于内置组件），我导入的方式似乎不错

Element type is invalid: expected a string (for built-in components), the way I do the import seems good

reactjs

react-admin