无法在 React 中将函数导入我的组件？答案

【问题标题】：Can't import a function to my component in React?无法在 React 中将函数导入我的组件？
【发布时间】：2019-10-23 03:46:44
【问题描述】：

const getWidthFactory = isMobileFromSSR => () => {
 const isSSR = typeof window === "undefined";
 const ssrValue = isMobileFromSSR
  ? Responsive.onlyMobile.maxWidth
  : Responsive.onlyTablet.minWidth;

 return isSSR ? ssrValue : window.innerWidth;
};

const ProfilePage = ({ isLoggedIn, logOutUser, isMobileFromSSR }) => (
 <>
  <Layout GenericHeadingComponent={HomepageHeading}
   isLoggedIn={isLoggedIn}
   logOutUser={logOutUser}
   getWidth={getWidthFactory(isMobileFromSSR)}
  >
   /* other stuff */
  </Layout>
 </>
)

当声明的函数在组件文件中时，这似乎有效，但在我导入它时无效？

这就是我在要导出的自己的文件中设置函数的方式：

utils/utils.js

import {
 Responsive,
} from 'semantic-ui-react'


export function getWidthFactory(isMobileFromSSR) {
 return function () {
  var isSSR = typeof window === "undefined";
  var ssrValue = isMobileFromSSR ? Responsive.onlyMobile.maxWidth : Responsive.onlyTablet.minWidth;
  return isSSR ? ssrValue : window.innerWidth;
 };
};

我认为让我失望的是文件中存在该函数的版本，它似乎利用了参数isMobileFromSSR

那么你将如何重写它，使其可以作为带有参数的导出函数工作？

更新

我正在像这样导入它或尝试...

 import { getWidthFactory } from  '../../util/util'

【问题讨论】：

你是怎么导入的
确保路径正确（util vs utils）。
@FelixKling 就是这样！谢谢我的朋友！
为什么要使用 { } 导入，而不是在 {} 中导出？
@MohanRamalingam：有多种方法可以创建命名导出，export {foo, bar} 只是其中一种。您可以通过直接导出声明来创建命名导出，例如export const foo = 42;或export function someFunction(){}，如问题所示。

标签： javascript reactjs ecmascript-6 es6-modules

【解决方案1】：

始终以大写字母开头的组件名称。 React 将以小写字母开头的组件视为 DOM 标签。

在你的情况下 getWidthFactory 应该像 GetWidthFactory

【讨论】：

看起来getWidthFactory 不是一个组件。