时间戳

首页 > 解决方案 > 在 React 中的组件之间使用钩子共享辅助函数

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

问题描述

当您想要创建简单的帮助器并将其导入其他组件时，案例很简单。例子：

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;

我考虑的解决方案：

  1. 作为道具传递numberFromContext- 这个工作正常。但是当涉及到将这个功能扩展到更大的东西时，传递许多道具可能会让人不知所措。例子：
const exampleFoo = ({numberFromProps, numberFromContext}) => {
  const sum = numberFromContext + numberFromProps;

  return sum;
};

export default exampleFoo;
  1. 使用 HOC 包装每个父组件 - 对于小型辅助功能来说似乎有点过分了。你怎么看？
  2. 自定义钩子 - 在这里不起作用，因为我需要exampleFoo在父函数内部使用。

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

标签： javascriptreactjsreact-nativereact-hooks

解决方案

推荐阅读