React 基础实战：从组件到案例全解析
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>