Question

我有一个名为createTheme的函数。在createTheme内部，有一个名为createVariation的函数，其最后一个参数为buttonIteratee。

如果buttonIteratee与createTheme在同一文件中，则没有问题。但是一旦将其移到另一个文件（button.tsx）中，我就会收到错误消息，并且iteratee变得不确定：

iteratee is not a function

一个重要的注意事项可能是，只有当我尝试使用createTheme将该属性设置为默认属性时，才会发生这种情况。

我想知道这是否与循环依赖项有关吗？

createTheme.ts

// WHEN IMPORTED, IT DOESN'T.    
import { buttonIteratee } from '../Button/Button';

// WHEN DEFINED IN SAME FILE, IT WORKS.
const buttonIteratee = (theme, value) => ({
  backgroundColor: value,
});

export const createTheme = (theme: Theme): Theme => {
  const mergedTheme = merge(theme, defaultTheme);

  mergedTheme.buttonVariants = createVariation('colors', theme, buttonIteratee);

  return mergedTheme;
};

Button.tsx

Button.defaultProps = {
    ...
    theme: createTheme(defaultTheme),
};

如果有帮助，这里是createVariation

export const createVariation = (
  path: keyof Theme,
  theme: Theme,
  iteratee: (theme: Theme, value: string) => CSSProperties,
): { [key: string]: CSSProperties } => {
  const properties = get(theme, path, {});
  const flattened: { [key: string]: string | number } = dotify(properties);
  return Object.entries(flattened).reduce((accumulator, [key, value]) => {
    const conversion: string = typeof value === 'number' ? `${value}px` : value;
    return { [key]: iteratee(theme, conversion), ...accumulator };
  }, {});
};

Answer 1

您需要从Button.tsx导出buttonIteratee才能使用它。

与defaultProps一起使用时，导入的函数未定义

1 个答案: