React 基础-组件-类组件通讯
React 基础-组件通讯-类组件
01. 组件通讯概述
目标：掌握什么是组件通讯
对于不同的组件而言，组件通讯是指数据能够在不同的组件之间进行流动。
在使用组件构建用户界面时，我们会将一个完整的页面拆分为若干个独立的小的组件，这些组件在完成不同任务时通常需要协同工作，比如多个组件需要用到相同的数据，因此组件之间必须能够相互通信，即在不同的组件之间传递数据。
组件通讯包含父子通讯、兄弟通讯、远房亲戚通讯。
对于同一个组件而言，组件通讯可以实现差异化复用组件。
02. 组件通讯基础
目标：掌握在组件外部向组件内部传递数据的方式、掌握在组件内部获取外部传递进来的数据的方式
在调用组件时通过属性的方式向组件内部传递数据。
// src/App.js
import React from "react";
import Person from "./Person";
export default class App extends React.Component {
render() {
return <Person name="张三" age="20" />;
}
}在类组件内部通过 this.props 获取外部传递进来的数据，this.props 为对象类型，外传递进来的数据都保存在该对象中。
比如在调用 Person 组件时传递了 name 属性和 age 属性，那么在 this.props 对象中就会存在 name 属性和 age 属性。
// src/Person.js
import React from "react";
export default class Person extends React.Component {
render() {
return <>{this.props.name} {this.props.age}</>;
}
}// 问题: 为什么当前类中没有显式定义 props, 我们仍然可以通过 this 来获取 props 呢?
// 以上代码是简写形式, 完整的写法如下:
// React 内部在实例化 Person 类时, 通过参数的方式接收了外部数据
// 所以我们在类的内部可以通过构造函数参数接收外部数据
// 由于 Person 类继承了 Component 类, 所以在构造函数中需要调用 super 方法, 这是 JavaScript 语法要求
// React 通过 super 方法的参数, 将 props 传递到了父类 Component 中
// 在父类 Component 中, 有这么一句代码, this.props = props， 也就是说父类有 props 属性, 值为外部传递进来的数据
// 所以在子类中我们就可以通过 this 来获取 props 了
export default class Person extends React.Component {
constructor(props) {
super(props);
}
render() {
return <>{this.props.name} {this.props.age}</>;
}
}03. 组件通讯注意事项
目标：掌握组件通讯的两个注意事项
(1) 在为组件传递数据时数据类型可以是任意的。
字符串、数值、布尔、数组、对象、函数、JSX
// src/App.js
export default class App extends React.Component {
render() {
return (
<Person
name="张三"
age={20}
isMarry={false}
skills={["编程", "射击"]}
style={{ color: "red" }}
sayHi={() => alert("Hi")}
jsx={<em>我是em标记</em>}
/>
);
}
}// src/Person.js
export default class Person extends React.Component {
render() {
return (
<>
<p>{this.props.name}</p>
<p>{this.props.age}</p>
<p>{this.props.isMarry ? "已婚" : "未婚"}</p>
<p>{this.props.skills.map((skill) => <span key={skill}>{skill}</span>)}</p>
<p style={this.props.style}>我是红色的文字</p>
<p onClick={this.props.sayHi}>打个招呼</p>
<p>{this.props.jsx}</p>
</>
);
}
}import React from "react";
export default class App extends React.Component {
state = {
person: {
name: "张三",
age: 20,
isMarry: false,
},
};
render() {
return <Person {...this.state.person} />;
}
}
class Person extends React.Component {
render() {
console.log(this.props); // {name: "张三", age: 20, isMarry: false}
return <></>;
}
}
(2) 在组件和组件之间传递数据时数据流向只能是从上到下，不能反向传递，此特性被称之为单向数据流。
单向数据流使的应用程序中的数据流向变得清晰，使应用程序更加可控、更加容易调试。
如果所有子组件都可以任意修改 props，那么当程序出现问题之后，问题的定位将变得异常复杂。
React 为了让开发者遵循单向数据流原则，将 props 设置为了只读的，下层组件在拿到 props 以后不能修改，避免下层组件修改 props 破坏单向数据流原则。
// src/Person.js
export default class Person extends React.Component {
render() {
this.props.name = "李四";
}
}04. 父传子组件通讯
目标：掌握父组件如何向子组件传递数据
// src/Parent.js
import React from "react";
import Child from "./Child";
export default class Parent extends React.Component {
state = {
name: "张三",
age: 20,
};
render() {
return (
<div>
我是父组件
<Child name={this.state.name} age={this.state.age} />
</div>
);
}
}// src/Child.js
import React from "react";
export default class Child extends React.Component {
render() {
const { name, age } = this.props;
return <div>我是子组件 {name} {age}</div>;
}
}练习：父组件向子组件传递数据
import React from "react";
import "./styles.css";
export default class App extends React.Component {
state = {
list: [
{
id: 1,
name: "超级好吃的棒棒糖",
price: 18.8,
info: "开业大酬宾，全场8折",
},
{
id: 2,
name: "超级好吃的大鸡腿",
price: 34.2,
info: "开业大酬宾，全场8折",
},
{
id: 3,
name: "超级无敌的冰激凌",
price: 14.2,
info: "开业大酬宾，全场8折",
},
],
};
render() {
return (
<div className="parent">
<h1>父组件</h1>
{/* 将以下内容抽取成独立的子组件 */}
<div className="child">
<div className="product">
<h3>标题：超级好吃的棒棒糖</h3>
<div>价格：18.8</div>
<p>开业大酬宾，全场8折</p>
<button>砍价</button>
</div>
</div>
</div>
);
}
}/* 基础样式 */
.parent {
width: 80%;
padding: 10px;
border: 2px solid black;
}
.child {
margin: 10px 0;
padding: 10px;
}
.product {
padding: 20px;
border: 2px solid #000;
border-radius: 5px;
margin: 10px;
}// 父组件
export default class App extends React.Component {
render() {
return (
<div className="parent">
<h1>父组件</h1>
{this.state.list.map((item) => (
<Child key={item.id} item={item} />
))}
</div>
);
}
}
// 子组件
class Child extends React.Component {
render() {
return (
<div className="child">
<div className="product">
<h3>标题：{this.props.item.name}</h3>
<div>价格：{this.props.item.price}</div>
<p>{this.props.item.info}</p>
</div>
</div>
);
}
}05. 子传父组件通讯
目标：掌握子组件更改父组件状态的方式
子组件默认情况下没有权限修改传父组件的状态，但是父组件本身可以更改自己的状态。
我们可以在父组件中声明一个用于修改状态的方法，这个方法接收新状态作为参数，然后将该方法传递给子组件。
子组件通过调用父组件传递过来的修改状态的方法对父组件中的状态进行修改。
// 父组件
import React from "react";
export default class App extends React.Component {
constructor() {
super();
this.modifyMsg = this.modifyMsg.bind(this);
}
state = {
msg: "Hello React",
};
modifyMsg(msg) {
this.setState({
msg,
});
}
render() {
return (
<>
<div>父组件: {this.state.msg}</div>
<Message msg={this.state.msg} modifyMsg={this.modifyMsg} />
</>
);
}
}// 子组件
class Message extends React.Component {
render() {
return (
<div>
子组件: {this.props.msg}
<button onClick={() => this.props.modifyMsg("Hi, I am from Child Component")}>button</button>
</div>
);
}
}练习：子组件向父组件传递数据
import NP from "number-precision";
export default class App extends React.Component {
constructor(props) {
super(props);
this.bargain = this.bargain.bind(this);
}
// 砍价
bargain(id, price) {
const newList = this.state.list.map((item) => {
if (item.id === id) {
return {
...item,
price: NP.minus(item.price, price),
};
} else {
return item;
}
});
this.setState({
list: newList,
});
}
render() {
return (
<div className="parent">
<h1>父组件</h1>
{this.state.list.map((item) => (
<Child bargain={this.bargain} />
))}
</div>
);
}
}
class Child extends React.Component {
render() {
return <button onClick={() => this.props.bargain(this.props.item.id, 1)}>砍价</button>;
}
}npm install number-precision06.兄弟组件通讯
目标：通过状态提升思想完成兄弟组件数据通讯
组件状态提升指的是将兄弟组件之间的共享状态提升到最近的公共父级组件中，由公共父级组件维护这个状态和修改状态的方法，父级组件再通过 props 的方式将状态数据传递到两个子组件中。
import React from "react";
// 父组件
export default class App extends React.Component {
constructor(props) {
super(props);
this.modifyMsg = this.modifyMsg.bind(this);
}
state = {
msg: "Hello React",
};
modifyMsg(msg) {
this.setState({ msg });
}
render() {
return (
<>
<Message msg={this.state.msg} />
<Machine modifyMsg={this.modifyMsg} />
</>
);
}
}
// 子组件一
class Message extends React.Component {
render() {
return <div>{this.props.msg}</div>;
}
}
// 子组件二
class Machine extends React.Component {
render() {
return (
<button onClick={() => this.props.modifyMsg("Hi, React.js")}>
button
</button>
);
}
}07. 跨级组件通讯
目标：掌握使用 context 进行组件通讯的方式
为了让兄弟组件实现状态共享我们通常会将状态进行提升，提升至它们最近的公共父级，但是当组件层级关系比较深时这种方式并不理想，因为在这个过程中有很多组件并不需要使用该状态但是却参与了状态的传递，我们将这种情况称之为 prop drilling。
为了解决以上问题 React 提供了 Context (上下文)，它允许跨组件层级传递状态，只要该组件在 Context 的范围内都可以直接获取状态。
// src/index.js
import { createContext } from "react";
export const { Provider, Consumer } = createContext({ name: "李四", age: 50 });
root.render(
<Provider value={{ name: "张三", age: 20 }}>
<App />
</Provider>
);// src/App.js
import React from "react";
import Middle from "./Middle";
export default class App extends React.Component {
render() {
return <Middle />;
}
}// src/Middle.js
import React from "react";
import Message from "./Message";
export default class Middle extends React.Component {
render() {
return <Message />;
}
}// src/Message.js
import React from "react";
import { Consumer } from "./index";
export default class Message extends React.Component {
render() {
return (
<Consumer>
{(value) => <div> {value.name} {value.age} </div>}
</Consumer>
);
}
}08. 综合案例-评论
目标：使用组件化思想拆分评论案例、使用组件通讯知识完成案例功能
1. 拆分组件
目标：拆分评论组件
评论组件结构样式详见：02-React基础-类组件 -> 06. 综合案例-评论
// 发表评论表单组件 src/components/comment/Form.js
import React from "react";
class Form extends React.Component {
render() {
return (
<div className="comm-input">
<textarea placeholder="爱发评论的人，运气都很棒"></textarea>
<div className="foot">
<div className="word">0/100</div>
<div className="btn">发表评论</div>
</div>
</div>
);
}
}
export default Form;// 评论列表排序组件: src/components/comment/Sort.js
import React from "react";
class Sort extends React.Component {
render() {
return (
<h3 className="comm-head">
热门评论<sub>(5)</sub>
<span className="active">默认</span>
<span>时间</span>
</h3>
);
}
}
export default Sort;// 评论列表组件：src/components/comment/List.js
import React from "react";
class List extends React.Component {
render() {
return (
<ul className="comm-list">
<li className="comm-item">
<div className="avatar"></div>
<div className="info">
<p className="name vip">
清风徐来
<img
alt=""
src="https://gw.alicdn.com/tfs/TB1c5JFbGSs3KVjSZPiXXcsiVXa-48-48.png"
/>
</p>
<p className="time">
2012-12-12
{/* 未收藏: icon-collect 已收藏: icon-collect-sel */}
<span className="iconfont icon-collect"></span>
<span className="del">删除</span>
</p>
<p>
这里是评论的内容！！！这里是评论的内容！！！这里是评论的内容！！！
</p>
</div>
</li>
</ul>
);
}
}
export default List;// 评论容器组件: src/components/comment/Container.js
import React from "react";
import Form from "./Form";
import Sort from "./Sort";
import List from "./List";
import "./styles.css";
class Container extends React.Component {
render() {
return (
<div className="comments">
<h3 className="comm-head">评论</h3>
{/* 评论表单 */}
<Form />
{/* 评论列表排序 */}
<Sort />
{/* 评论列表 */}
<List />
</div>
);
}
}
export default Container;// 根组件: src/App.js
import React from "react";
import Container from "./components/comment/Container";
export default class App extends React.Component {
render() {
return <Container />;
}
}2. 渲染评论列表
目标：渲染评论列表状态
由于评论表单组件、评论排序组件、评论列表组件都会用到评论列表状态、所以依据状态提升理论，评论列表状态要提升至评论容器组件中。
评论表单组件：将用户发表的最新评论更新到评论列表状态中。
评论排序组件：对评论列表状态进行排序。
评论列表组件：渲染评论列表状态。
// 评论容器组件: src/components/comment/Container.js
class Container extends React.Component {
constructor(props) {
super(props);
this.state = {
// 当前用户
user: {
name: "清风徐来",
vip: true,
avatar: "https://static.youku.com/lvip/img/avatar/310/6.png",
},
// 评论列表
comments: [
{
id: 100,
name: "__RichMan",
avatar: "https://r1.ykimg.com/051000005BB36AF28B6EE4050F0E3BA6",
content:
"这阵容我喜欢😍靳东&闫妮，就这俩名字，我就知道是良心剧集...锁了🔒",
time: new Date("2022-10-12T10:10:23"),
vip: true,
collect: false,
},
{
id: 101,
name: "糖蜜甜筒颖",
avatar:
"https://image.9xsecndns.cn/image/uicon/712b2bbec5b58d6066aff202c9402abc3370674052733b.jpg",
content:
"突围神仙阵容 人民的名义第三部来了 靳东陈晓闫妮秦岚等众多优秀演员实力派 守护人民的财产 再现国家企业发展历程",
time: new Date("2022-09-23T15:12:44"),
vip: false,
collect: true,
},
{
id: 102,
name: "清风徐来",
avatar: "https://static.youku.com/lvip/img/avatar/310/6.png",
content:
"第一集看的有点费力，投入不了，闫妮不太适合啊，职场的人哪有那么多表情，一点职场的感觉都没有",
time: new Date("2022-07-01T00:30:51"),
vip: true,
collect: false,
},
],
};
}
render() {
return <List comments={this.state.comments} user={this.state.user}/>;
}
}
export default Container;// 评论列表组件：src/components/comment/List.js
import React from "react";
import dateFormat from "dateformat";
import classNames from "classnames";
class List extends React.Component {
render() {
return (
<ul className="comm-list">
{this.props.comments.map((item) => (
<li key={item.id} className="comm-item">
<div
className="avatar"
style={{ backgroundImage: `url(${item.avatar})` }}
></div>
<div className="info">
<p className={classNames(["name", { vip: item.vip }])}>
{item.name}
{item.vip ? (
<img
alt=""
src="https://gw.alicdn.com/tfs/TB1c5JFbGSs3KVjSZPiXXcsiVXa-48-48.png"
/>
) : null}
</p>
<p className="time">
{dateFormat(item.time, "yyyy-mm-dd")}
{/* 未收藏: icon-collect 已收藏: icon-collect-sel */}
<span
className={classNames([
"iconfont",
{
"icon-collect": !item.collect,
"icon-collect-sel": item.collect,
},
])}
></span>
{this.props.user.name === item.name ? (
<span className="del">删除</span>
) : null}
</p>
<p>{item.content}</p>
</div>
</li>
))}
</ul>
);
}
}3. 发表评论
目标：实现发表评论功能
// 评论容器组件：src/components/comment/Container.js
class Container extends React.Component {
constructor(props) {
super(props);
// 更正方法 this 指向为组件实例对象
this.updateComments = this.updateComments.bind(this);
}
// 更新评论列表
updateComments(comment) {
this.setState({
comments: [comment, ...this.state.comments],
});
}
render() {
return <Form updateComments={this.updateComments} user={this.state.user} />;
}
}
export default Container;// 评论表单组件：src/components/comment/Form.js
class Form extends React.Component {
constructor(props) {
super(props);
this.state = {
content: "",
};
// 将方法内部的 this 更改为组件实例对象
this.updateContent = this.updateContent.bind(this);
this.publishComment = this.publishComment.bind(this);
}
// 更新 content 状态
updateContent(event) {
// 获取用户在文本框中输入的内容
const value = event.target.value;
// 如果状态字数大于100 阻止状态更新
if (value.length > 100) return;
// 更新组件状态
this.setState({ content: value });
}
// 发表评论
publishComment() {
// 如果用户没有输入评论内容, 阻止程序向下执行
if (this.state.content.length === 0) return;
// 更新评论列表
this.props.updateComments({
id: Math.random(),
content: this.state.content,
...this.props.user,
collect: false,
time: new Date().toDateString(),
});
// 清空文本域内容
this.setState({ content: "" });
}
render() {
return (
<div className="comm-input">
<textarea value={this.state.content} onChange={this.updateContent} placeholder="爱发评论的人，运气都很棒"></textarea>
<div className="foot">
<div className="word">{this.state.content.length}/100</div>
<div className="btn" onClick={this.publishComment}>
发表评论
</div>
</div>
</div>
);
}
}4. 删除评论
目标：实现删除评论功能
// 评论容器组件：src/components/comment/Container.js
class Container extends React.Component {
constructor(props) {
super(props);
// 更正方法 this 指向为组件实例对象
this.deleteComment = this.deleteComment.bind(this);
}
// 删除评论
deleteComment(id) {
this.setState({
comments: this.state.comments.filter((item) => item.id !== id),
});
}
render() {
return <List deleteComment={this.deleteComment} />;
}
}// 评论列表组件：src/components/comment/List.js
class List extends React.Component {
constructor(props) {
super(props);
// 将方法内部的 this 指向更改为当前组件实例对象
this.deleteComment = this.deleteComment.bind(this);
}
// 删除评论
deleteComment(id) {
if (window.confirm("您确定要删除该评论吗?")) {
this.props.deleteComment(id);
}
}
render() {
return <span onClick={() => this.deleteComment(item.id)}>删除</span>
}
}5. 收藏评论
目标：实现收藏评论功能
// 评论容器组件：src/components/comment/Container.js
class Container extends React.Component {
constructor(props) {
super(props);
// 更正方法 this 指向为组件实例对象
this.collectComment = this.collectComment.bind(this);
}
// 收藏评论、取消收藏评论
collectComment(id) {
this.setState({
comments: this.state.comments.map((item) =>
item.id === id ? { ...item, collect: !item.collect } : item
),
});
}
render() {
return <List collectComment={this.collectComment} />;
}
}// 评论列表组件：src/components/comment/List.js
class List extends React.Component {
// 收藏评论
render() {
return <span onClick={() => this.props.collectComment(item.id)}></span>;
}
}6. 评论排序
目标：实现排序功能
// 评论容器组件：src/components/comment/Container.js
class Container extends React.Component {
constructor(props) {
super(props);
// 更正方法 this 指向为组件实例对象
this.sortComment = this.sortComment.bind(this);
}
// 评论排序
sortComment(field, method) {
this.setState({
comments: orderBy(this.state.comments, [field], [method]),
});
}
render() {
return <Sort sortComment={this.sortComment} count={this.state.comments.length} />;
}
}// 评论排序组件：src/components/comment/Sort.js
class Sort extends React.Component {
constructor(props) {
super(props);
this.state = {
sortField: "id",
};
this.sortComment = this.sortComment.bind(this);
}
sortComment(field) {
// 更新当前组件状态, 为的是 active 类名的添加与删除
this.setState({ sortField: field });
// 调用父组件的排序方法实现排序
this.props.sortComment(field, "asc");
}
render() {
return (
<h3 className="comm-head">
热门评论<sub>({this.props.count})</sub>
<span
onClick={() => this.sortComment("id")}
className={classNames({ active: this.state.sortField === "id" })}
>
默认
</span>
<span
onClick={() => this.sortComment("time")}
className={classNames({ active: this.state.sortField === "time" })}
>
时间
</span>
</h3>
);
}
}09. 组件子节点
目标：掌握组件子节点的用法
- 学习组件子节点的基本用法
- 学习操作组件子节点的属性和方法
① 学习组件子节点的基本用法
在调用组件时可以为组件标签添加子节点，通过子节点也可以向组件内部传递数据。
export default class App extends React.Component {
render() {
return <Message>Hello Message</Message>;
}
}
class Message extends React.Component {
render() {
return <>{this.props.children}</>;
}
}
// 等价写法
export default class App extends React.Component {
render() {
return <Message children="Hello Message">Hello Message</Message>;
}
}标签子节点的类型可以是字符串、数值、数组、函数、JSX 等。
<Message>99999999</Message><Message>
<p>Hello Message</p>
</Message><Message>
<p>Hello Message</p>
<p>Hello Message</p>
</Message>export default class App extends React.Component {
render() {
return (
<Message>
<Machine />
</Message>
);
}
}
class Message extends React.Component {
render() {
return <div>{this.props.children}</div>;
}
}
class Machine extends React.Component {
render() {
return <div>Machine</div>;
}
}<Message>{["a", "b", "c"]}</Message>export default class App extends React.Component {
render() {
return (
<Message>
{() => {
console.log("Hello React");
}}
</Message>
);
}
}
class Message extends React.Component {
render() {
return <div onClick={this.props.children}>box</div>;
}
}export default class App extends React.Component {
render() {
return <Message>{() => <p>Hello React</p>}</Message>;
}
}
class Message extends React.Component {
render() {
return <div>{this.props.children()}</div>;
}
}export default class App extends React.Component {
render() {
return <Message>{(text) => <p>{text}</p>}</Message>;
}
}
class Message extends React.Component {
render() {
return <div>{this.props.children("Hi React")}</div>;
}
}export default class App extends React.Component {
render() {
return <Message>{(jsx) => <p>{jsx}</p>}</Message>;
}
}
class Message extends React.Component {
render() {
return <div>{this.props.children(<span>我是span</span>)}</div>;
}
}练习：使用组件子节点增强组件的复用能力。
// 根组件
export default class App extends React.Component {
render() {
return <HomePage>我是右侧区域内容</HomePage>;
}
}
// 头部组件
class Header extends React.Component {
render() {
return <div>Header</div>;
}
}
// 侧边栏组件
class SideBar extends React.Component {
render() {
return <div>SideBar</div>;
}
}
// 用于复用头部组件和侧边栏组件的组件
class Multiplex extends React.Component {
render() {
return (
<>
<Header />
<SideBar />
<div>{this.props.children}</div>
</>
);
}
}
// 首页组件
class HomePage extends React.Component {
render() {
return <Multiplex>我是首页右侧区域内容</Multiplex>;
}
}
// 列表页组件
class ListPage extends React.Component {
render() {
return <Multiplex>我是列表页右侧区域内容</Multiplex>;
}
}② 学习操作组件子节点的属性和方法
(1) React.Children.only：限制组件子节点只能有一个子节点且必须有
export default class App extends React.Component {
render() {
return (
<Message>
<p>Hello</p>
</Message>
);
}
}
class Message extends React.Component {
render() {
try {
// 检测组件的子节点是否只有一个
React.Children.only(this.props.children);
} catch (error) {
// 如果组件的子节点不只一个
return <div>Message 组件的只节点有且只能有一个</div>;
}
return <div>{this.props.children}</div>;
}
}(2) React.Children.count：获取组件子节点的数量
class Message extends React.Component {
render() {
return <>{React.Children.count(this.props.children)}</>;
}
}(3) React.Children.map：对组件子节点进行转换
import React from "react";
export default class App extends React.Component {
render() {
return (
<Message>
<img
src="https://images.pexels.com/photos/10198426/pexels-photo-10198426.jpeg"
alt=""
width="300px"
/>
<img
src="https://images.pexels.com/photos/4386364/pexels-photo-4386364.jpeg"
alt=""
width="300px"
/>
</Message>
);
}
}
class Message extends React.Component {
render() {
return (
<>
{React.Children.map(this.props.children, (item) => (
<a href="https://www.baidu.com">{item}</a>
))}
</>
);
}
}(4) React.Children.toArray：将组件子节点转换为数组
如果组件有多个子节点，this.props.children 是数组类型，如果组件只有一个子节点，this.props.children 是对象类型，如果组件没有子节点，this.props.children 为 undefined 类型。通过 React.Children.toArray 方法保证 this.props.children 为一直为数组类型，以保证 Children.map 方法可用。
class Message extends React.Component {
render() {
console.log(React.Children.toArray(this.props.children));
}
}练习：封装图片切换组件。
import React from "react";
export default class App extends React.Component {
render() {
return (
<ImageToggle>
<img
src="https://images.pexels.com/photos/10198426/pexels-photo-10198426.jpeg"
alt=""
width="300px"
/>
<img
src="https://images.pexels.com/photos/4386364/pexels-photo-4386364.jpeg"
alt=""
width="300px"
/>
<img
src="https://images.pexels.com/photos/9812128/pexels-photo-9812128.jpeg"
alt=""
width="300px"
/>
<img
src="https://images.pexels.com/photos/8746965/pexels-photo-8746965.jpeg"
width="300px"
alt=""
/>
</ImageToggle>
);
}
}
class ImageToggle extends React.Component {
constructor(props) {
super(props);
this.state = {
index: 0,
total: React.Children.count(this.props.children),
};
this.onClickHandler = this.onClickHandler.bind(this);
}
onClickHandler() {
this.setState({
index:
this.state.index + 1 > this.state.total - 1 ? 0 : this.state.index + 1,
});
}
render() {
return (
<>
{
React.Children.map(this.props.children, (item) => (
<div className="imgContainer" onClick={this.onClickHandler}>
{item}
</div>
))[this.state.index]
}
</>
);
}
}本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 麟玖Sam！
相关推荐
2025-03-21
React 基础 - JSX
React 基础 - JSX01. React 概述 目标：了解 React 是什么 官方文档(英文)、官方文档(中文)、官方文档(新版、开发中、英文) 官方释义：A JavaScript library for building user interfaces ( 一个用于构建用户界面的 JavaScript 库 )。 React 是一个开源的 JavaScript 库，用于构建 web 应用中的视图层，就是 web 应用中的前端用户界面。 React 是目前最为流行的前端框架之一。 https://npmtrends.com/angular-vs-react-vs-vue https://trends.google.com/trends/explore?q=react,vue,angular React 是由 Facebook 的软件工程师在 2012 年创建，于 2013 年 5 月开源，目前由 Facebook 以及个人开发人员和公司组成的社区维护。 React 起源于 Facebook 的内部项目，因为当时该公司对市场上所有 JavaScript...
2025-03-26
React 基础-组件-类组件
React 基础-组件-类组件01. 组件概述 目标：了解 React 组件的作用和创建组件的方式 什么是组件 组件设计思想 1. 什么是组件在前端开发中组件就是用户界面当中的一块独立的区域，在组件内部会包含这块区域中的视图代码、样式代码以及逻辑代码。 React 采用组件的方式构建用户界面，通过将多个组件进行组合形成完成的用户界面，就像搭积木。 2. 组件设计思想组件的核心思想之一就是复用，定义一次到处使用。 组件可以用来封装用户界面中的重复区块，复用重复区块。 组件的另外一个核心思想是解耦。 在传统的 web 页面开发中，一个 html 文件就是一个页面，就是说当前页面中的所有代码都被写在了同一个文件中，这就很容器导致代码的冲突。 在组件化开发中，每个组件都有自己的作用域，组件与组件之间的代码不会发生冲突，从而避免在传统开发模式中经常出现的改A坏B的问题。 02. 创建组件 目标：掌握创建类组件的方式 import ReactDOM from "react-dom/client"; import { Component...
2025-03-26
React路由[V5]
React 路由01. 路由概述 目标：理解前端路由的作用 在传统的 web 应用中前端都是由多页面组成的，用户可以通过链接在不同的页面之间进行跳转。 为了提升用户体验，在现代的 web 应用中前端大多都是单页面应用程序，也就是只有一个 HTML 页面的应用程序。 即使是单页面应用程序我们也要满足用户可以在”不同页面之间”跳转的需求，所以前端路由应运而生。 前端路由是指让用户从一个视图导航(跳转)到另一个视图，此处的视图指的是表示页面的组件，也就是使用组件代替传统 web 应用中的 HTML 页面。 前端路由实际上就是 URL 路径与组件之间的映射关系，即不同的页面组件对应不同的 URL 路径，用户可以通过不同的 URL 路径访问不同的页面组件。 02. 基本使用 目标：掌握路由的基本用法 下载 React Router 并准备页面组件 创建路由规则并在应用中使用 Route 组件的另一种语法格式 ① 下载 React Router 并准备页面组件 npm install react-router-dom@5.3.3 //...
2025-03-26
React 基础-组件-组件进阶
React基础-组件进阶-类组件01. 组件属性校验 目标：掌握组件属性校验的基本使用方式 对于组件来说，组件属性 (props) 是组件的调用者传递的，如果组件调用者传递的组件属性不符合要求，将会导致组件内部的代码执行出错，所以为了组件运行的稳定性，我们需要在组件内部对接收的组件属性进行校验。 https://zh-hans.reactjs.org/docs/typechecking-with-proptypes.html class App extends React.Component { render() { return <Colors colors={100} />; } } class Colors extends React.Component { render() { return ( <ul> {this.props.colors.map((item) => ( ...
2025-03-26
React 全局状态管理-Redux
全局状态管理-Redux01. 状态管理概述 目标：理解组件管理的局限性和全局状态管理的优势 1.1 组件状态管理React 只是一个用于构建用户界面的库，专注于数据驱动 DOM 的领域，虽然也提供了状态管理的能力，但是对于复杂项目的状态管理依然吃力。 React 采用组件的方式进行状态的管理，当组件与组件的关系比较疏远时传递状态和更新状态变的异常复杂。 1.2 全局状态管理Redux 是一个专业的面向 JavaScript 的状态管理工具，在使用了 Redux 以后状态可以被统一管理，不再完全依赖于组件。 状态被存储在 store 的对象中，所有组件直接在 store 对象中获取状态，所有组件通过统一的方式修改 store 对象中的状态。 当 store 对象中的状态被修改后，使用到了该状态的组件会自动更新。 全局状态管理解决了组件状态管理的弊端、避免了通过 props 的方式进行复杂的状态传递。 02. 状态管理 Redux 目标：掌握使用 Redux 管理状态的方式 npm install redux@4.2.0 2.1 概述在使用 Redux...