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;

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

1 个答案: