我在html文件中嵌入了react，我如何使用react hooks？通常我会从 React 导入它们，但是如何使用嵌入的 HTML 来导入它们呢？
<html>
<body>
<script
src="https://unpkg.com/react@17/umd/react.development.js"
crossorigin
></script>
<script
src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
crossorigin
></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<div id="root"></div>
<script type="text/babel">
const testData = { test: "hi!" };
function App() {
return (
<div className="container-fluid text-center gutter">
<div className="row content">
<div className="col-sm-12 text-left">
<div className="banner">
<img className="logo" src="tree_logo.png" alt="logo" />
<h1 className="title">
Biogeoclimetic Ecosystem Classification
</h1>
</div>
</div>
</div>
<div className="row content">
<div className="col-sm-8 text-left"></div>
<div className="col-sm-4 text-left side-panel">
<img className="side-img" src="hierarchy.png" alt="hierchy" />
<img className="side-img" src="edatpic.png" alt="edatope" />
<img className="side-img" src="bc_map.png" alt="map" />
</div>
</div>
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
</script>
</body>
</html>
最佳答案
React 是一个全局变量，因此您可以从 React 获取钩子(Hook)
const { useEffect } = React;
或者你可以直接使用hooks这种方式
React.useEffect(() => {}, [])
<html>
<body>
<script
src="https://unpkg.com/react@17/umd/react.development.js"
crossorigin
></script>
<script
src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
crossorigin
></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<div id="root"></div>
<script type="text/babel">
const testData = { test: "hi!" };
const { useEffect } = React; //import it here
function App() {
//using hooks here
useEffect(() => {
console.log('testing hooks');
},[])
return (
<div className="container-fluid text-center gutter">
<div className="row content">
<div className="col-sm-12 text-left">
<div className="banner">
<img className="logo" src="tree_logo.png" alt="logo" />
<h1 className="title">
Biogeoclimetic Ecosystem Classification
</h1>
</div>
</div>
</div>
<div className="row content">
<div className="col-sm-8 text-left"></div>
<div className="col-sm-4 text-left side-panel">
<img className="side-img" src="hierarchy.png" alt="hierchy" />
<img className="side-img" src="edatpic.png" alt="edatope" />
<img className="side-img" src="bc_map.png" alt="map" />
</div>
</div>
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
</script>
</body>
</html>关于reactjs - 如何在嵌入式 React 中使用 React hooks，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/72166957/