javascript - 如何使用 Context API 将一个状态和函数传递给多个不同的组件？

Question

我现在在 React 上工作了 6 个月。我现在才在解决这个问题，因为 Context API 对我来说还很新。我喜欢它，但我不知道如何正确使用它，来清理和优化我的 React APP。

我遇到了这个问题，我在每个组件中使用 Axios 获取数据，每个组件中具有相同的功能和相同的状态。

我实际上是复制粘贴..来访问我的数据，但我想用 Context API 来解决这个问题。

希望有人能帮助我，我想变得更好并理解这里的 Context API。

我的代码:

state = {
    social_media: [],
    page_home: [],
    loading: true,
};

getCoffee() {
    return new Promise(resolve => {
        setTimeout(() => resolve('☕'), 2000); // it takes half of a second to make coffee
    });
}

async showData() {
    try {
        const wpSocial = axios(`${ACF_DATA_URL}/options/social_media_data`);
        const wpHome = axios(`${WP_DATA_URL}/pages?slug=home`);

        await this.getCoffee();

        await Promise.all([wpSocial, wpHome]).then(response => {
            this.setState({
                social_media: response[0].data.social_media_data,
                page_home: response[1].data[0],
                loading: false,
            });
        });
    } catch (e) {
        console.error(e); // 💩
    }
}

componentDidMount() {
    this.showData();
}

我想要完成的是我想创建一个 Context API 并将相同的状态、函数 ShowData 和 GetCoffee() 传递给多个不同的组件。

我该怎么做？

谢谢大家!

Answer 1

很简单，先创建一个新的上下文(context.js)

const Context = React.createContext();

使用上面创建的上下文(context.js)创建一个提供程序，该提供程序类将保存状态和方法。

class Provider extends React.Component {
  state = {
    some_state: 'value',
    some_method: this.method
  }

  method = () => {
    console.log('It works');
  }

  render() {
    return (
      <Context.Provider>
        {this.props.children}
      </Context.Provider>
    );
  }
}

导出提供者和消费者(context.js)

const Consumer = Context.Consumer;
export { Provider, Consumer };

使用提供程序 (app.js) 包装 App 组件，以便 App 树中的每个 JSX 组件都能够使用 some_state和some_method

import { Provider } from './{some_path}/context';

<Provider>
  <App> ... </App>
</Provider>

最后，使用某个组件中的值，您必须在声明 <Consumer> 后告诉您想要哪些状态属性组件(这里我们同时使用 some_state 和 some_method )

import { Consumer } from './{some_path}/context';

class SomeComponent extends React.Component {
  render() {
    return (
      <Consumer>
        {({some_state, some_method}) => {
          <button onClick={some_method}>{some_state}</button>
        }
      </Consumer>
    );
  }
}