在前端项目开发的时候，往往逃不开组件之间传值这种操作。常见的几种场景，父子组件、非相关组件。 大家都知道使用redux就能搞定所有的问题，redux是一个全局状态管理，可以把所有的数据放在一个单独的地方在使用的时候直接拿来用；就相当于一个数据仓库。 image.png 但是如果不用redux呢？下面我来给大家普及一下这种操作。 父子组件之间传值 父子组件就是两个有包含关系的两个组件。他们之间进行参数传递使用到的主要是props这个桥梁。在父组件中通过props属性把方法和数据传递给自组件。如果要改变父组件的数据，就调用传递过去的方法。 白话版 小明的爸爸?️一张银行卡，小明知道里面有5千块钱(父组件向足组件传参，通过属性传递)。小明想向那张卡存钱，但是年龄太小无法操作取款机。so，小明爸爸可以提供一个存钱的服务，小明告诉他老爸去把我的压岁钱存到卡里(子组件向父组件传参，调用父组件提供的方法)。 父传子使用props属性 父组件通过属性向自组件传递参数，通过属性把数据和方法传递给子组件 import React, { useState } from "react"; function ParentC() { const [money, setMoney] = useState(5000); return ( ); } 子传父使用方法调用 子组件通过调用父组件的方法改变父组件中的数据(向父组件传值) import React from "react"; function ChildC(props) { const [m, changeM] = props; return ( ); } 非相关组件之间传值 非相关组件之间传值的话，在当前版本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 ( {children} ); } export default AppContext; index.js入口文件 ... import { AppProvider } from "./store"; // 引入创建好的数据源 ... ReactDOM.render( ...所有的其他组件 , 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; ... } 此中方法简单粗暴，就相当于定义了一堆全局变量和全局方法，用来改变数据和存储数据。 视频讲解 参考 [译] 从设计师的角度看 Redux

本文章由javascript技术分享原创和收集