我的项目中有一个可拖动的组件,但每当我启动开发服务器时,它都会抛出一个错误-
react-jsx-dev-runtime.development.js:87 Warning: React.jsx: 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.
Check your code at draggable.js:9.
下面是我的draggable.js代码:
import React, { Component } from "react";
import ReactDOM from 'react-dom';
import { Draggable } from "react-draggable";
console.log(Draggable); //undefined
export class Board extends Component {
render() {
return (
<div>
<Draggable position={{ x: 0, y: 0 }} handle=".handle">
<div>
<div className="handle">Drag me</div>
<div>I will move with the handle</div>
</div>
</Draggable>
</div>
);
}
}
使用console.log语句,我发现问题是第9行的Draggable组件未定义,但在阅读react-draggable的文档后,我不明白这是为什么。
我运行了npm install react-draggable并检查了package.json,该项目安装了react-draggable版本4.4.5
1条答案
按热度按时间doinxwow1#
解决方案是更改import语句
到
注意,DraggableCore import语句放在花括号中,这是我感到困惑的原因