0

我已经在 indexa.js 中声明了一个 React 上下文，并且我正在尝试访问在 Employee.js 中的 App.js 中设置的上下文值。但这并没有体现出我对 React 不熟悉的价值。请帮帮我。提前致谢

//index.js

export const employeeContext = React.createContext();
const AppContextInteration = <App></App>
ReactDOM.render(AppContextInteration, document.getElementById('root'));

//App.js

export class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            EmpId: 1,
            EmpName: 'xxx'
        }
    }

    render() {
        return (
            <div>
                <h1> App Component</h1>
                <p> Employee Id : {this.state.EmpId}</p>
                <employeeContext.Provider value={this.state} >
                     <Employee/>
                </employeeContext.Provider>

            </div>
        )
    }
}

//Employee.js

export class Employee extends React.Component {
    context = employeeContext;
    constructor(props) {
        super(props);
        console.log();
    }
    render() {
        return (
            <div>
                <h1>Employee Component </h1>
                <p> Employee Id  : {this.context.EmpId} </p>
            </div>
        )
    }
}
4

2 回答 2

0

你可以使用 Context.Consumer

<MyContext.Consumer>
  {value => /* render something based on the context value */}
</MyContext.Consumer>

https://reactjs.org/docs/context.html

我更喜欢使用带有 useContext 钩子的功能组件（这很容易实现）你可以参考React hooks tutorial(useContext)

于 2020-09-20T21:38:45.707 回答
0

正如您所说的那样，您是新来的反应，但您几乎仍然工作得很好。发生此错误可能是您尚未在员工组件中导入上下文（employeeContext），如果您已经导入，那么我建议您使用将其转换为函数组件和使用（useContext）钩子会更好，性能和理解明智。谢谢

链接：https ://www.youtube.com/watch?v=UjjtvroahBU&list=PLC3y8-rFHvwisvxhZ135pogtX7_Oe3Q3A&index=17&ab_channel=Codevolution

于 2020-10-07T10:28:53.647 回答