Question

当您想创建简单的帮助程序并将其导入其他组件时，Case 很简单。示例：

const exampleFoo = ({numberFromProps}) => {
  const {exampleNumber} = exampleApi.getNumber();

  const sum = exampleNumber + numberFromProps;

  return sum;
};

export default exampleFoo;

但是当我想使用数据时问题就开始了，例如表单上下文（这是不正确的，不可能使用不是 React 组件或 React 钩子的钩子）：

import {useContext} from 'react';
import AppContext from './AppContext';

const exampleFoo = ({numberFromProps}) => {
  const {numberFromContext} = useContext(AppContext);

  const sum = numberFromContext + numberFromProps;

  return sum;
};

export default exampleFoo;

我考虑的解决方案：

将 numberFromContext 作为道具传递 - 这个效果很好。但是当涉及到将此功能扩展到更大的东西时，传递许多道具可能会让人不知所措。示例：

const exampleFoo = ({numberFromProps, numberFromContext}) => {
  const sum = numberFromContext + numberFromProps;

  return sum;
};

export default exampleFoo;

使用 HOC 来包装每个父组件 - 对于小辅助函数来说似乎有点过分。你有什么看法？
自定义钩子 - 在这里不起作用，因为我需要在父函数中使用 exampleFoo。

主要问题：是否有不同的方式（第 1 点和第 2 点中提到的）在组件之间共享功能？

在 React 组件之间使用钩子共享辅助函数

0 个答案: