使用上下文 api 传递道具状态道具

Question

我想在不使用 props 的情况下将我的状态值名称传递给另一个组件 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;

强文本

Answer 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;