【实例】React 组件传值方法: Props、回调函数、Context、路由传参

React原始传值方法

借用状态管理库的传值见下篇文:MobX 和 Redux
【实例】React 状态管理库 MobX Redux 入门及对比

文章目录

父组件->子组件 props

父组件可以通过属性(props)向子组件传递数据。子组件可以通过 this.props 来访问这些属性。

复制代码
//父组件中
<ChildComponent data={this.state.data} />
//子组件中
console.log(this.props.data);

子组件->父组件 回调函数

父组件将一个回调函数作为 props 传递给子组件,子组件在适当的时候调用这个回调函数,并将需要传递的值作为参数传入。通过这种方式,子组件可以将数据传递给父组件。

复制代码
//父组件中
handleDataFromChild(data) {
    this.setState({ dataFromChild: data });
}
<ChildComponent onDataReceived={this.handleDataFromChild} />

//子组件
<button onClick={() => this.props.onDataReceived(this.state.childData)}>Send Data to Parent</button>

Context

Context 是 React 提供的一种直接访问祖先节点上的状态的方法,从而避免了多级组件层层传递 props 的频繁操作。

使用 Context.Provider 包裹住一个组件后,其所有的子孙组件都可以通过 useContext(Context) - 函数组件推荐 或 Context.Consumer 包裹的方法获取到指定上下文的值。

复制代码
// MyContext.js
const MyContext = React.createContext();
export default MyContext;

// ParentComponent.js
import MyContext from './MyContext';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const data = 'Hello from Parent';
  return (
    <MyContext.Provider value={data}>
      <ChildComponent />
    </MyContext.Provider>
  );
}

// ChildComponent.js
import MyContext from './MyContext';

function ChildComponent() {
  return (
    <MyContext.Consumer>
      {data => <div>{data}</div>}
    </MyContext.Consumer>
  );
}

个人理解类似于订阅者-发布者模式中的观察者模式

Context 在 React 组件树中的一个组件提供数据(发布者),而其他组件可以通过 Context 订阅这些数据。当提供数据的组件的数据发生变化时,所有订阅了该 Context 的组件都会收到更新。

https://react.dev/learn/passing-data-deeply-with-context

路由传值

  1. 动态路由
    路由需要配置成动态路由:如 path='/user/:id',传参方式,如 'user/111'。通过 this.props.match.params.id 取得 url 中的动态路由 id 部分的值,除此之外还可以通过 useParams(Hooks)来获取。

    import { BrowserRouter as Router, Route } from 'react-router-dom';

    function App() {
    return (
    <Router>
    <Route path="/user/:id" component={User} />
    </Router>
    );
    }

    function User(props) {
    const { id } = props.match.params;
    return

    User ID: {id}
    ;
    }

  2. URL 参数

    传参方式如:'admin?id='1111'',const params = new URLSearchParams(window.location.search); window.location.search 返回的是包含问号的查询字符串,如 "?id=1111",所以我们需要使用 URLSearchParams 对象来解析其中的参数。

  3. Link 中的 query 或 state 传值

    在Link组件的to属性中传象,<Link to={{pathname:'/admin',query:'111',state:'111'}}>Go;。通过this.props.location.state 或 this.props.location.query 来获取即可,传递的参数可以是对象、数组等,但是存在缺点就是只要刷新页面,参数就会丢失。

相关推荐
慧一居士23 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead25 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina7 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_7 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
甜瓜看代码8 小时前
1.
react.js·node.js·angular.js