我按照无效钩子警告发现 here 无济于事。我的代码中是否有一些错误我忽略了。当我使用命令 npm ls react-dom 时,我得到:“react-dom@17.0.2”。我的代码有什么问题?我以为你可以像下面那样在功能组件中使用 useState 钩子
import {useState} from 'react';
import ReactDOM from 'react-dom';
import './index.css';
function Navbar()
{
const [childFontSize, setChildFontSize] = useState("5vh");
return(
<div id={"navbarContainer"}>
<span className={"font"}>XYZ</span>
<span className={"font"} style={{fontSize: childFontSize}}>XYZ</span>
<span className={"font"} style={{fontSize: childFontSize}}>XYZ</span>
<span className={"font"} style={{fontSize: childFontSize}}>XYZ</span>
</div>
);
}
ReactDOM.render(Navbar(), document.getElementById("navbar"));
答案 0 :(得分:1)
问题是这一行:
ReactDOM.render(Navbar(), document.getElementById("navbar"));
函数组件永远不应该作为函数调用,它们需要使用 JSX 或 React.createElement 调用。
ReactDOM.render(<Navbar />, document.getElementById("navbar"));
或者(不要这样做)你可以调用 React.createElement
(这是 JSX 被转译成的):https://reactgo.com/react-createelement-example/
ReactDOM.render(React.createElement(Navbar, null, null), document.getElementById("navbar"));
// not on StackOverflow
// import {useState} from 'react';
// import ReactDOM from 'react-dom';
// import './index.css';
const useState = React.useState;
function Navbar()
{
const [childFontSize, setChildFontSize] = useState("5vh");
return(
<div id={"navbarContainer"}>
<span className={"font"}>XYZ</span>
<span className={"font"} style={{fontSize: childFontSize}}>XYZ</span>
<span className={"font"} style={{fontSize: childFontSize}}>XYZ</span>
<span className={"font"} style={{fontSize: childFontSize}}>XYZ</span>
</div>
);
}
ReactDOM.render(<Navbar />, document.getElementById("navbar"));
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="navbar"></div>