Question

如何访问的内部对象阵营背景信息一类组分的函数的内部。

我有以下React组件

import StoreContext from '../../context/StoreContext'

class ProductForm extends Component {
  static contextType = StoreContext

  constructor(props) {
    super(props);

  }

  handleOptionChange(event) {

    const test = this.contextType.client.testObject

  }

我已经尝试过像这样在上下文中访问client对象，但是它无法正常工作，因为它说无法读取undefined属性。

我想知道我的错误是。

Answer 1

更改此上下文代替contextType

this.context.client.testObject

即您的代码应该像

import StoreContext from '../../context/StoreContext'

class ProductForm extends Component {
  static contextType = StoreContext

  constructor(props) {
    super(props);

  }

  handleOptionChange(event) {

    const test = this.context.client.testObject

  }

将静态属性保留为上下文类型，并在使用this.context的方法中访问上下文

Answer 2

我将分三步描述在类组件中使用上下文

使用要与整个应用共享的值定义上下文对象

const StaticBackEditor = React.createContext({isDebug: true})

在整个上下文中包装整个应用并设置值

function App() {
    return (
        <Provider store={store}>
            <StaticBackEditor.Provider value={{isDebug: true}}>
                <div className="App">
              <Layout />
        </div>
                </StaticBackEditor.Provider>
            </Provider>
        )

使用组件中的值

class Tree extends React.Component<IProps, IState> {
    // this must be named contextType!
    static contextType = StaticBackEditor 
}

// its wired that we need to access a static field through this , but you do!
{this.context.isDebug && <span className="debug">

如何在类组件的函数内部使用React Context

2 个答案: