我尝试在我的 React 项目中使用react-player。我正在使用打字稿。我在构建时收到以下错误:
“ReactPlayer”不能用作 JSX 组件。 其实例类型“ReactPlayer”不是有效的 JSX 元素。 “render()”返回的类型在这些类型之间不兼容。 类型“ReactNode”不可分配给类型“false”|元素|无效的'。 类型“未定义”不可分配给类型“假”|元素|无效的'。 我怀疑这是 ReactPlayer 特有的。我可能错误配置了该项目。有什么帮助吗?
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react"
},
"include": [
"src"
]
}
package.json
{
"name": "home-exercise",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"@types/jest": "^24.9.1",
"@types/node": "^12.12.67",
"@types/react": "^16.9.56",
"@types/react-dom": "^16.9.8",
"flexbox-react": "^4.4.0",
"moment": "^2.29.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-player": "^2.6.2",
"react-scripts": "3.4.3",
"typescript": "^3.7.5"
},
tsconfig
,一切似乎都正常。尝试将您的项目与那个项目进行比较。
import * as React from "react";
import ReactPlayer from "react-player";
import "./styles.css";
export default function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<ReactPlayer url="https://www.youtube.com/watch?v=ysz5S6PUM-U" />
</div>
);
}
旁注;我非常有兴趣看到您对
import
的 ReactPlayer
声明。该错误表明您没有导入您认为正在导入的内容。
就我而言,我在package.json上升级了@types/react和“@types/react-dom”,现在我使用@types/react版本18.2.78和@types/react-dom版本18.2 .25并且工作正常:
"@types/react": "^18.2.78",
"@types/react-dom": "^18.2.25",
祝你好运