【 React 】 React 组件数据通信

函数组件

1) 基于prop传值(父传子)

javaScript 复制代码
// 父组件
export default function Content() {
  const orderData = {name: 'yf'}
  return (
    <div>
      <son orderData={orderData}/>
    </div>
  )
}

// 子组件
const ListContent = (props) => {
  const orderData = props.orderData
  return (
    <div>{orderData.name}</div>
  )
}

export default ListContent

2) useContext(父子组件深层传值)

  • 跨越组件层级直接传递变量,实现共享
  • 参考此文
javaScript 复制代码
// MyContext.js

// 将 Context 单独提取到一个文件中,方便其他组件引用:

import { createContext } from 'react';

const MyContext = createContext();

export default MyContext;


// Parent.js

// Parent 组件负责管理状态,并通过 MyContext.Provider 传递数据:

import React, { useState } from 'react';
import Child from './Child';
import MyContext from './MyContext';

function Parent() {
  const [count, setCount] = useState(2);

  return (
    <div className="header">
      <p onClick={() => { setCount(count + 1) }}>点击</p>
      <MyContext.Provider value={count}>
        <Child />
      </MyContext.Provider>
    </div>
  );
}

export default Parent;



// Child.js
// Child 组件作为中间组件,渲染 GrandChild 组件:

import React from 'react';
import GrandChild from './GrandChild';

function Child() {
  return (
    <div className="header">
      <GrandChild />
    </div>
  );
}

export default Child;


// GrandChild.js
// GrandChild 组件通过 useContext 获取 count 的值并显示:

import React, { useContext } from 'react';
import MyContext from './MyContext';

function GrandChild() {
  const count = useContext(MyContext);

  return (
    <div className="header">
      {count}
    </div>
  );
}

export default GrandChild;

3)使用第三方库 Mobx

类组件

1) 基于prop传值(父传子)

javaScript 复制代码
// 父组件
import * as React from 'react'
import Son from './son'

export default class HeaderNav extends React.Component {
  message = {name: "yf", interset: "hj"};
  render() {
    return (
      <div className="header">
        <Son myProp={this.message}/>
      </div>
    )
  }
}
javaScript 复制代码
// 子组件
import * as React from 'react'
export default class Son extends React.Component {
  message = this.props.myProp;
  render() {
    return (
      <div className="header">
        {this.message.interset}
      </div>
    )
  }
}

2) 上下文Context(父传子)

  • Context 提供了一个无需为每层组件手动添加 props,就能在组件树间进行数据传递的方法

  • Attention: 需基于同一个上下文React.createContext(), 故需在同一个文件内使用

  • 参考此文

javaScript 复制代码
import React, { createContext } from 'react';
const myContext = createContext();

class Index extends React.Component {
  message = {name: "yf", interset: "hj"};
  render() {
    return (
      <div className="header">
        <myContext.Provider value={this.message}>
          <Son/>
        </myContext.Provider>
      </div>
    )
  }
}

class Son extends React.Component {
  render() {
    return (
      <div className="header">
        <Sonson />
      </div>
    )
  }
}

class Sonson extends React.Component {
  // 在需要获取祖代传递的 context 值的后代组件中,声明 contextType 静态属性,值为之前创建的 context;
  static contextType = myContext;
  render() {
    return (
      <div className="header">
        {this.context.name}
      </div>
    )
  }
}

export default Index
相关推荐
yume_sibai9 分钟前
Vue 插槽
前端·javascript·vue.js
O败者食尘D29 分钟前
【Vue2】结合chrome与element-ui的网页端条码打印
前端·vue.js·chrome
橘颂TA1 小时前
【C++】C++11特性的介绍和使用(第三篇)
前端·c++·算法·c++11
爷_8 小时前
字节跳动震撼开源Coze平台!手把手教你本地搭建AI智能体开发环境
前端·人工智能·后端
charlee449 小时前
行业思考:不是前端不行,是只会前端不行
前端·ai
Amodoro10 小时前
nuxt更改页面渲染的html,去除自定义属性、
前端·html·nuxt3·nuxt2·nuxtjs
Wcowin10 小时前
Mkdocs相关插件推荐(原创+合作)
前端·mkdocs
伍哥的传说11 小时前
CSS+JavaScript 禁用浏览器复制功能的几种方法
前端·javascript·css·vue.js·vue·css3·禁用浏览器复制
lichenyang45311 小时前
Axios封装以及添加拦截器
前端·javascript·react.js·typescript
Trust yourself24311 小时前
想把一个easyui的表格<th>改成下拉怎么做
前端·深度学习·easyui