Question

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'

Answer 1

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

您的情况 getWidthFactory 应该类似于 GetWidthFactory

无法在React中将函数导入到我的组件中吗？

1 个答案: