使用 context api 传递 props 状态 props答案

【问题标题】：Passing props state props using context api使用 context api 传递 props 状态 props
【发布时间】：2021-07-29 13:55:05
【问题描述】：

我想在不使用道具的情况下将我的状态值名称传递给另一个组件 Context3.js。我已经使用上下文 api 来创建上下文，并通过提供者传递了值。现在在 Context3.js 我正在尝试使用它，但在输出屏幕上我无法看到我的输出。

import './App.css';
import Context3 from './Components/Context3';

function App() {
  return (
    <div className="App">
      <Context3/>
    </div>
  );
}

export default App;

主要组件是App.js。

import React, {Component} from 'react';
export const MyContext = React.createContext();

class Context1 extends Component{
       state={
            name: 'mohammed'
       }
    render(){
        return(
            <div>
            <MyContext.Provider value={this.state.name}>
            </MyContext.Provider>
            </div>
        )
    }
}

export default Context1;

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

class Context3 extends Component{
    render(){  
        return(
            <div>
                <MyContext.Consumer>
                    {
                        value => <h1> {value} </h1> 
                    }
                </MyContext.Consumer>
            </div>
        )
    }
}

export default Context3;

强文本

【问题讨论】：

在哪里渲染 Context1（上下文提供者）？
在 App.js 中我正在渲染

标签： javascript reactjs react-context

【解决方案1】：

你需要用 ContextProvider (Context1) 包裹你的孩子

import React, {Component} from 'react';
export const MyContext = React.createContext();

class Context1 extends Component{
       state={
            name: 'mohammed'
       }
    render(){
        return(
            <div>
            <MyContext.Provider value={this.state.name}>
              {this.props.children}
            </MyContext.Provider>
            </div>
        )
    }
}

export default Context1;

import './App.css';
import Context1 from './Components/Context1';
import Context3 from './Components/Context3';

function App() {
  return (
    <div className="App">
      <Context1>
        <Context3/>
      </Context1>
    </div>
  );
}

export default App;

【讨论】：