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

React 基础实战：从组件到案例全解析

news 2025/8/20 20:00:25

React 基础实战专栏：从组件到案例全解析

本专栏围绕 React 核心概念（组件、Props、State、生命周期）展开，通过 6个实战案例+核心知识点拆解，帮你掌握 React 基础开发逻辑，每篇聚焦1个实战场景，搭配完整代码与原理讲解，适合 React 入门者巩固基础。

专栏目录

【组件传参实战】用 React 组件展示对象属性（猫的信息卡片）
【数组渲染实战】商品列表的两种表格实现方案
【父子组件实战】科目成绩的列表化展示（ul + li 嵌套）
【State 状态实战】循环滚动的同学姓名展示组件
【表单控件实战】下拉框默认选中的实现技巧
【综合案例实战】带图片的商品列表完整开发

第1篇：组件传参实战——展示猫的信息卡片

核心目标

掌握 组件接收对象参数 的方法，学会用 ...扩展运算符 简化属性传递，理解 Props 的只读特性。

实战代码

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>React 猫信息展示</title><!-- 引入 React 核心库 --><script src="js/react.js"></script><script src="js/react-dom.js"></script><script src="js/browser.js"></script><script type="text/babel">// 1. 定义猫的对象数据（包含name、age、color属性）const cat = {name: "诗书画唱家的神猫",age: 666,color: "黄色"};// 2. 定义展示组件（通过Props接收猫的属性）class CatInfo extends React.Component {render() {// Props 是只读的，不能修改return (<div style={{ border: "1px solid #333", padding: "10px", width: "200px" }}><p>名字：{this.props.name}</p><p>年龄：{this.props.age}岁</p><p>毛色：{this.props.color}</p></div>);}}// 3. 渲染组件：用...扩展运算符传递整个cat对象ReactDOM.render(<CatInfo {...cat} />,document.getElementById("root"));</script>
</head>
<body><div id="root"></div>
</body>
</html>

核心知识点

Props 传递：组件通过 this.props 接收外部参数，支持单个传递（name={cat.name}）或用 ...扩展运算符 批量传递（{...cat}）。
Props 特性：Props 是只读对象，组件内部不能修改 this.props 的值（如 this.props.age = 10 会报错）。
组件职责：该组件仅负责“展示数据”，数据由外部传入，符合 React “单向数据流”思想。

第2篇：数组渲染实战——商品列表的两种表格实现

核心目标

掌握 数组映射（map）渲染列表 的方法，对比“单组件渲染”与“父子组件拆分”的差异，理解列表渲染的 key 属性作用。

实战代码（两种方案）

方案1：父子组件拆分（低耦合，易维护）

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>商品列表（父子组件）</title><script src="js/react.js"></script><script src="js/react-dom.js"></script><script src="js/browser.js"></script><script type="text/babel">// 子组件：渲染单个商品行（tr）class ProductRow extends React.Component {render() {return (<tr><td>{this.props.name}</td><td>{this.props.price}元</td></tr>);}}// 父组件：渲染表格（table）+ 批量生成子组件class ProductTable extends React.Component {render() {// 商品数组数据const products = [{ name: "诗书画唱牌商品1", price: 666 },{ name: "诗书画唱牌商品2", price: 888 }];// 映射数组生成子组件：key必须唯一（这里用商品名）const productRows = products.map(product => (<ProductRow key={product.name} name={product.name} price={product.price} />));// 渲染表格return (<table border="1px" style={{ borderCollapse: "collapse" }}><thead><tr>