共享逻辑反应

Question

我使用了更高阶的组件来在我的组件之间共享一个函数。通过这个实现，该函数在我的组件中作为道具。

该应用程序支持多种语言，因此在每个组件中传递密钥并获取要显示的哈希值。散列值使用上下文传递给所有组件。现在getSkinHash访问上下文并返回哈希值。

const {getSkinHash} = this.props; //shared function,accesses the context

const value = getSkinHash(SOME_VALUE);

这个实现没有问题，但是每次都从prop中获取函数会导致在所有组件中编写很多样板代码。

有没有更好/替代方法来实现这一目标？

由于

Answer 1

React与属性一起使用，因此您不能只是说您不想使用属性。那是在组件之间共享数据时。

你可以做到缩短

step.gam

是：

const {getSkinHash} = this.props; const value = getSkinHash(SOME_VALUE); 。

如果这是一个通用函数，而不是依赖于组件，您可以选择将其导入到组件中，就像导入其他东西一样。

this.props.getSkinHash(SOME_VALUE)

然后你可以用import { myFunction } from './functions' 简单地调用它。

如果您需要在组件之间同步数据，请使用Redux操作并将组件连接到全局状态。您的其他组件也将了解值哈希更改。