Question

如何通过上下文从ShoppingBasketProvider组件传递addToCard函数以在另一个组件中运行它？在组件中使用上下文将功能保留在组件中的正确性如何。谢谢您的帮助。

我有一个组件：

export const ShoppingBasketContext = React.createContext();

export default class ShoppingBasketProvider extends Component {


  addToCard = (event) => {
    console.log(event);
  }

  render() {
    const { shoppingBasketItems } = `this.state`;

    return (
      <ShoppingBasketContext.Provider
        value={{
          shoppingBasketItems,

        }}>
        {this.props.children}
      </ShoppingBasketContext.Provider>
    )
 }
}

Answer 1

您可以将函数作为值传递给Context provider。

export const ShoppingBasketContext = React.createContext();

export default class ShoppingBasketProvider extends Component {


  addToCard = (event) => {
    console.log(event);
  }

  render() {
    const { shoppingBasketItems } = `this.state`;

    return (
      <ShoppingBasketContext.Provider
        value={{
          shoppingBasketItems,
          addToCard: this.addToCard
        }}>
        {this.props.children}
      </ShoppingBasketContext.Provider>
    )
 }
}

您可以将函数保留在ContextProvider中，并允许其他组件从上下文中使用该函数并对其进行调用。

Answer 2

Context API是一个提供程序，通过它我们可以在组件之间共享数据。显然，我们可以通过类似的方式传递函数：

value={{
   shoppingBasketItems,
   addToCard: this.addToCard
}}

但是我不建议您采用这种方法。取而代之的是，您可以拥有一个单独的文件Util.js，并在其中导出所需的函数，并且可以在任何需要的地方使用该文件：

Util.js

export const required_function = () => {
  //...
}

Component.js

import { required_function } from 'Util'
//... required_function() ...

反应上下文：如何传递功能？

2 个答案: