时间戳

首页 > 解决方案 > 如何调度一个动作来改变 React 中的初始上下文值？

reactjs - 如何调度一个动作来改变 React 中的初始上下文值？

问题描述

我context为一个Overlay组件创建了一个。这个上下文是负责visibility的Overlay。

import React from "react"

const Context = React.createContext({
    visibility: false
})

export { Context }

我的Overlay组件可见性取决于此context：

import React, { useContext } from "react"
import { Context } from "./context"

const Overlay = ({ children }) => {

    const { visibility } = useContext(Context)
    return visibility &&
        <div className={`absolute left-0 right-0 bg-black top-0 bottom-0 bg-black-50 rounded-xl flex flex-col align-baseline justify-center items-center`}>
            {children}
        </div>
}

export default Overlay

另一方面，我有一个More组件负责显示Overlay.

import React, { useContext } from "react"
import { MORE_ICON } from "../../../constants/icons"
import { Context as OverlayContext } from "../Overlay/context"

const More = () => {
   // How to change the context visibility here
    return (<img
        src={MORE_ICON}
        alt="Options"
        className="ml-auto w-6 h-6 cursor-pointer"
    />)
}

export default More

我的问题是如何从More组件更改上下文的值？

标签： reactjsreact-hooksreact-context

解决方案

大多数时候你会这样做的方式是在上下文中传递一个函数，它允许你改变上下文的某些方面。您在这里没有上下文提供程序，但在您的上下文提供程序包装器中，您可能会执行以下操作：

import { Context as OverlayContext } from "../Overlay/context";
import React from "react";

class OverlayContextProvider extends React.Component {
    constructor(props){
        super(props);

        // bind the 'this' keyword to refer to the instance of the class
        this.setVisibility = this.setVisibility.bind(this);
        this.state = {
            visibility: false,
            setVisibility: this.setVisibility
        }
    }

    setVisibility(nextValue){
        this.setState({visibility: nextValue});
    }

    render(){
        return (
            <OverlayContext.Provider value={this.state}>
                {this.props.children}
            </OverlayContext.Provider />
        )
    }

}

在您的More组件中，您可以使用上下文中的函数来更新上下文。

import React, { useContext } from "react"
import { MORE_ICON } from "../../../constants/icons"
import { Context as OverlayContext } from "../Overlay/context"

const More = () => {
    const context = useContext(OverlayContext);

    return (<img
        src={MORE_ICON}
        alt="Options"
        className="ml-auto w-6 h-6 cursor-pointer"

        // You can modify it from anywhere but just using an onClick example
        onClick={() => context.setVisibility(false)}
    />)
}

export default More

推荐阅读