React不将
我试图使用UseEffect react钩子,但出现错误:React Hook";useEffect";在函数"中被调用;驾驶舱";既不是React功能组件,也不是定制的React Hook功能
import React, { useEffect } from "react";
import styled from "styled-components";
import "./cockpit.css";
// it is a css code
const StyledButton = styled.button`
background-color: ${props => (props.alt ? "red" : "green")};
border: 1px solid blue;
padding: 8px;
&:hover {
background-color: ${props => (props.alt ? "salmon" : "lightgreen")};
color: black;
}
`;
const cockpit = props => {
useEffect(() => {
console.log("in useEffect");
});
const classess = [];
if (props.persons.length <= 2) {
classess.push("red");
}
if (props.persons.length <= 1) {
classess.push("bold");
}
return (
<div>
<h1>{props.title}</h1>
<p className={classess.join(" ")}>Hi, I am React App</p>
<StyledButton
key="B1"
alt={props.showPerson}
onClick={props.switchNameHandler}
>
Switch Name
</StyledButton>
<StyledButton
alt={props.showPerson}
key="B2"
onClick={props.togglePersonHandler}
>
Toggle Name
</StyledButton>
</div>
);
};
export default cockpit;
有谁能帮我理解我为什么会出错吗。
package.json 中的依赖项
"dependencies": {
"@react-native-community/cli": "^4.10.1",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"radium": "^0.26.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-native": "^0.63.2",
"react-native-version-update": "^0.2.7",
"react-scripts": "3.4.1",
"styled-components": "^5.1.1"
}
cockpit
识别为组件,因为所有自定义组件都需要大写。
要解决此问题,只需将组件Cockpit
的名称大写即可。