当前位置：首页 > wzjs >正文

婚纱官网山西优化公司

wzjs 2025/8/7 20:05:47

婚纱官网,山西优化公司,锦州北京网站建设,展示型网站有哪些文章目录 1 组件基础2 组件props3 React开发者工具结语 1 组件基础 React中一切都是组件，组件是React的基础。组件就是一个UI片段拥有独立的逻辑和显示组件可大可小，可嵌套组件的价值和意义： 组件嵌套来组织UI结构，和HTML一…

文章目录

- 1 组件基础
- 2 组件props
- 3 React开发者工具
- 结语

1 组件基础

React中一切都是组件，组件是React的基础。

组件就是一个UI片段
拥有独立的逻辑和显示
组件可大可小，可嵌套

组件的价值和意义：

组件嵌套来组织UI结构，和HTML一样。
组件拆分，利于代码维护和多人协作开发。
可封装公共组件（或第三方组件），复用代码，提高开发效率。

示例：创建问卷列表页面

import { useState } from "react";
import type { MouseEvent } from "react";import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import "./App.css";function App() {const [count, setCount] = useState(0);const fn = (e: MouseEvent<HTMLButtonElement>, name: string): void => {e.preventDefault(); // 阻止默认行为e.stopPropagation; // 阻止冒泡console.log("clicked");console.log("name: " + name);};const list = [{ name: "张三", age: 18 },{ name: "李四", age: 22 },{ name: "王五", age: 23 },{ name: "六子", age: 54 },];return (<><div><a href="https://vite.dev" target="_blank"><img src={viteLogo} className="logo" alt="Vite logo" /></a><a href="https://react.dev" target="_blank"><img src={reactLogo} className="logo react" alt="React logo" /></a></div><h1 style={{ color: "red", backgroundColor: "white" }}>Vite + React</h1><div><label htmlFor="name">姓名：</label><input id="name" type="text" /></div><div><buttontype="button"onClick={(e) => {fn(e, "button");}}>点击</button></div><ul>{list.map((user) => {const { name, age } = user;return <li key={name}>{age}</li>;})}</ul><div className="card"><button onClick={() => setCount((count) => count + 1)}>count is {count}</button><p>Edit <code>src/App.tsx</code> and save to test HMR</p></div><p className="read-the-docs">Click on the Vite and React logos to learn more</p></>);
}export default App;

拆分列表为列表组件和问卷卡片组件，列表组件如下：

import React, { FC } from "react";import QuestionCard from "./QuestionCard";
const List1: FC = () => {//列表页//问卷列表数据const questionList = [{ id: "q1", title: "问卷1", isPublished: false },{ id: "q2", title: "问卷2", isPublished: false },{ id: "q3", title: "问卷3", isPublished: true },{ id: "q4", title: "问卷4", isPublished: false },{ id: "q5", title: "问卷5", isPublished: true },];return (<div><h1>问卷列表页</h1><div>{questionList.map((q) => {const { id, title, isPublished } = q;return (<QuestionCardkey={id}id={id}title={title}isPublished={isPublished}/>);})}</div></div>);
};export default List1;

问卷卡片组件如下：

import React, { FC } from "react";import "./QuestionCard.css";type PropsType = {id: string;title: string;isPublished: boolean;
};const QuestionCard: FC<PropsType> = (props) => {const { id, title, isPublished } = props;//编辑问卷function edit(id: string) {console.log("id:", id);}return (<div key={id} className="list-item"><strong>{title}</strong>&nbsp;{/* 条件判断 */}{isPublished ? (<span style={{ color: "green" }}>已发布</span>) : (<span>未发布 </span>)}&nbsp;<button onClick={() => edit(id)}>编辑问卷</button></div>);
};export default QuestionCard;