【实例】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 来获取即可,传递的参数可以是对象、数组等,但是存在缺点就是只要刷新页面,参数就会丢失。

相关推荐
sunbyte1 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss
前端的日常2 分钟前
网页视频录制新技巧,代码实现超简单!
前端
前端的日常4 分钟前
什么是 TypeScript 中的泛型?请给出一个使用泛型的示例。
前端
ccc10188 分钟前
老师问我localhost和127.0.0.1,有什么区别?
前端
Struggler28115 分钟前
Chrome插件开发
前端
前端 贾公子27 分钟前
Monorepo + vite 怎么热更新
前端
coding随想36 分钟前
掌控网页的魔法之书:JavaScript DOM的奇幻之旅
开发语言·javascript·ecmascript
然我1 小时前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子1 小时前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹1 小时前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#