在前端项目开发的时候，往往逃不开组件之间传值这种操作。常见的几种场景，父子组件、非相关组件。
大家都知道使用redux就能搞定所有的问题，redux是一个全局状态管理，可以把所有的数据放在一个单独的地方在使用的时候直接拿来用；就相当于一个数据仓库。
image.png
但是如果不用redux呢？下面我来给大家普及一下这种操作。
父子组件之间传值
父子组件就是两个有包含关系的两个组件。他们之间进行参数传递使用到的主要是props这个桥梁。在父组件中通过props属性把方法和数据传递给自组件。如果要改变父组件的数据，就调用传递过去的方法。
白话版
小明的爸爸🈶️一张银行卡，小明知道里面有5千块钱(父组件向足组件传参，通过属性传递)。小明想向那张卡存钱，但是年龄太小无法操作取款机。so，小明爸爸可以提供一个存钱的服务，小明告诉他老爸去把我的压岁钱存到卡里(子组件向父组件传参，调用父组件提供的方法)。
父传子使用props属性
父组件通过属性向自组件传递参数，通过属性把数据和方法传递给子组件
import React, { useState } from "react";
function ParentC() {
const [money, setMoney] = useState(5000);
return (
<div>
<h1>小明爸爸有:{money}</h1>
<ChildC m={money} changeM={setMoney}></ChildC>
</div>
);
}
子传父使用方法调用
子组件通过调用父组件的方法改变父组件中的数据(向父组件传值)
import React from "react";
function ChildC(props) {
const [m, changeM] = props;
return (
<div>
<button onClick={() => changeM(m + 2000)}>存钱</button>
</div>
);
}
非相关组件之间传值
非相关组件之间传值的话，在当前版本16.8之后可以使用context上下文。简单粗暴，直接上代码
store.js
import React, { createContext, useState } from "react";
const AppContext = createContext(); // 通过createContext方法创建一个上下文，用来做全局传递使用
const { Provider } = AppContext; // 全局数据提供组件，可以理解为数据源
// 创建一个全局的数据源，在入口文件的时候把所有的组件包括起来
export function AppProvider(props) {
const { children } = props; // 传递的属性，children表示要渲染的子组件
// 定义局部状态，在此处是一个可以全局使用的状态，在所有AppProvider包括在内的自组件都可以用
// 可以定义多个的
const [count, setCount] = useState(1);
// 设置value把属性信息传递给子组件
return (
<Provider value={{ name: "Tom", count, setCount }}>{children}</Provider>
);
}
export default AppContext;
index.js入口文件
...
import { AppProvider } from "./store"; // 引入创建好的数据源
...
ReactDOM.render(
<AppProvider>
...所有的其他组件
</AppProvider>,
document.getElementById("root")
);
在项目的任意一个组件中使用
import React, { useContext } from "react";
import Appcontext from "./store";
...
function HelloWorld(props) {
...
const context = useContext(Appcontext);
// console.log(context);
// 可以获取Provider设置的value值，里面的方法可以直接调用，属性可以直接获取
// 就相当于在定义了全局的属性和方法，属性用来存储数据，方法用来改变数据
// 数据改变之后组件重新渲染
const { setCount, count } = context;
...
}
此中方法简单粗暴，就相当于定义了一堆全局变量和全局方法，用来改变数据和存储数据。
网友评论