新版本react的context使用

2024年3月1日 149次阅读 来源: yolo

Context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性。

在一个典型的 React 应用中，数据是通过 props 属性由上向下（由父及子）的进行传递的，但这对于某些类型的属性而言是极其繁琐的（例如：地区偏好，UI主题），这是应用程序中许多组件都所需要的。 Context 提供了一种在组件之间共享此类值的方式，而不必通过组件树的每个层级显式地传递 props 。

参考文档： https://react.docschina.org/d…

connect.js

import React from 'react'
const ctx = React.createContext()
export const { Provider, Consumer } = ctx
export const withComponent = Component => props => <Consumer>{ propsObj => <Component { ...props } propsObj={propsObj}></Component> }</Consumer>
export default ctx

index.js
在最外层组件引入 Provider(*注意Provider的value名字不能改变)

import React, { Component } from 'react
import { Provider } from './connect.js
import Carder from './carder.js'
export default class Index extends Component {
    state = {
        testObj: {
            test: false,
            reverse: () => this.setState({...this.state.test.obj, test: !this.state.test})
        }
            
            
    }
    render() {
        return (
            <Provider value={this.state.testObj}>
                <Carder>
            </Provider>
        )
    }
}

carder.js

import React, { Component } from 'react
import { withComponent } from './connect.js
class Carder extends Component {
    state = {
        test: false
    }
    render() {
        return (
            <div>
                <p>test的值为：{this.props.testObj.test}</p>
                <button onClick={this.props.testObj.reverse}>点击</button>
            </div>
        )
    }
}
export default withComponent(Carder )
    原文作者：yolo
    原文地址: https://segmentfault.com/a/1190000018987772
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞