React 组件是一个 js 函数，函数可以添加 jsx 标记
当前页使用组件，基本使用
注意：组件的名称，第一个字母一定要大写，否则会报错
import { createRoot } from "react-dom/client";
import "./index.css";
const root = createRoot(document.querySelector("#root"));
// 组件的使用
const App = () => {
const handleIncident = () => {
console.log("组件的使用");
};
return (
<div>
<div className="box" onClick={handleIncident}>
inde.js 内容
</div>
</div>
);
};
// 使用
root.render(<App />);
拆分组件使用
目录结构
index.js
import { createRoot } from "react-dom/client";
// 引入组件
import App from "./App";
const root = createRoot(document.querySelector("#root"));
// 使用
root.render(<App />);
App.js 现在为出口文件
// 组件的使用
// 引入样式
import "./App.css";
// 引入组件
import Title from "./components/TitleData/index";
// 注意组件的名称，第一个字母一定要大写，否则会报错
const App = () => {
const handleIncident = () => {
console.log("组件的使用");
};
return (
<div>
<div className="box" onClick={handleIncident}>
<Title></Title>
inde.js 内容
</div>
</div>
);
};
// 导出
export default App;
组件文章来源：https://www.toymoban.com/news/detail-605686.html
components\TitleData\index.js文章来源地址https://www.toymoban.com/news/detail-605686.html
const Title = () => {
return <h1>TitleData 标题</h1>;
};
export default Title;
到了这里，关于React 组件使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
