reactjs - 元素类型无效 : expected a string (for built-in components), 我的导入方式似乎不错

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 组件签名方面有点奇怪，因为它既不期望单个 porps 对象，也不期望将其破坏到内部变量中，而是期望两个参数。
尝试这个:

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

使用组件时也试试这个:

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