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>
);
};
我以这种方式导入 ProcessModalimport 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;
你知道为什么我有这个错误,或者我可以通过什么方式找到问题,因为错误没有给我任何指示。
最佳答案
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}/>
关于reactjs - 元素类型无效 : expected a string (for built-in components), 我的导入方式似乎不错,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64011067/