Reactjs 元素类型无效：应为字符串（对于内置组件），导入方式似乎不错

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

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

在我的组件上

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.jsx

processModal.jsx的内容：

import ProcessModal from './processModal';

import React，{useState}来自“React”；
从“反应模态”导入模态；
const ProcessModal=（selectedds，open）=>{
常量自定义样式={
内容：{
前50%，
左：50%，
右图：“自动”，
底部：“自动”，
利润率：'-50%'，
转换：“转换（-50%，-50%）”
}
};
变量字幕；
const[showProcessModal，setShowProcessModal]=useState（打开）；
函数afterOpenModal（）{
//引用现在已同步，可以访问。
subtitle.style.color='#f00'；
}
函数closeModal（）{
设置ShowProcessModal（假）；
}
返回(
（字幕=_subtitle）}>你好
关闭
我是情态动词
选项卡导航
停留
在…内
模态
{/*
);
};
导出默认处理模式；

---

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

React组件需要一个单独的props对象作为参数。您所做的有点奇怪，因为它既不需要单个porps对象，也不需要将其分解为内部变量，而是需要两个参数

试试这个：

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;

使用该组件时，请尝试以下操作：

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

您在5号的

processModal.jsx

底部有一个悬空的

/>

。这是一个转录错误吗？而且这个错误通常至少表明哪个文件有错误的导入，你有那个信息吗？您确定它是

processModal.jsx

？

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

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