React Material UI Button组件不起作用
Posted
技术标签:
【中文标题】React Material UI Button组件不起作用【英文标题】:React Material UI Button component not working 【发布时间】:2022-01-09 19:47:34 【问题描述】:我已经安装了 create-react-app 和 material-ui/core 并开始制作一个简单的 Button。
在将按钮添加到 App 文件并使用命令 npm start 后,我希望该按钮会显示在浏览器中,但我得到 Error invalid hook call。
我能想到的唯一问题是依赖项可能已损坏,因为挂钩显然有效。
这是一个简单的按钮: 应用.js
import Button from '@material-ui/core';
export default function App()
return (
<div className="App">
<Button>Click Me</Button>
</div>
);
索引.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);
索引.html
<div id='root'></div>
这是 package.json 文件(此处仅显示依赖项以减少代码长度):
"name": "mui-play",
"version": "0.1.0",
"private": true,
"dependencies":
"@testing-library/jest-dom": "^5.15.1",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
【问题讨论】:
【参考方案1】:已解决:依赖项存在问题,我了解到即使您安装了 npm 包,您仍然必须在源代码编辑器中转到终端并将依赖项安装到 package.json 文件中。这是允许按钮显示在浏览器中的固定文件: 包.json:
"name": "mui-play",
"version": "0.1.0",
"private": true,
"dependencies":
"@material-ui/core": "^4.12.3",
"@testing-library/jest-dom": "^5.15.1",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
已添加行"@material-ui/core": "^4.12.3",
,以便包可以使用依赖项。
【讨论】:
【参考方案2】:尝试手动添加所需的包,然后在终端上运行npm install
【讨论】:
以上是关于React Material UI Button组件不起作用的主要内容,如果未能解决你的问题,请参考以下文章
打字稿:React.forwardRef 带有来自@material-ui 的通用道具
自动完成中的 React Material UI 打开模式失去焦点
如何使 Material UI 反应按钮充当 react-router-dom 链接?
React - 通过对象数组映射以在 Material UI 中创建日期文本字段