如何使用 React 在 Next.js 中导出 const 值？

Posted 2023-02-22

【中文标题】如何使用 React 在 Next.js 中导出 const 值？

【英文标题】：How to export a const value in Next.js with React?

【发布时间】：2021-03-04 21:01:25

【问题描述】：

我正在尝试将名为 views 的 const 值从 BlogPost.js 导出到 blog.js。

这里是BlogPost.js

import React from 'react';
import useSWR from 'swr';
import format from 'comma-number';

import 
  useColorMode,
  Heading,
  Text,
  Flex,
  Box,
  Badge,
  Link,
  Tooltip
 from '@chakra-ui/react';

import fetcher from '../lib/fetcher';

const BlogPost = (frontMatter) => 
  const 
    title,
    modality,
    summary,
    image,
    brand,
    lastPublishedOn,
    firstCreatedOn
   = frontMatter;
  const  colorMode  = useColorMode();
  const secondaryTextColor = 
    light: 'gray.700',
    dark: 'gray.400'
  ;

  const slug = frontMatter.__resourcePath
    .replace('Blog\\', '')
    .replace('.mdx', '');

  const  data  = useSWR(`/api/page-views?id=$slug`, fetcher);
  const views = data?.total;
  //console.log('views ', views); //This is the one I am trying to export. 

  return (
    <>
      <Flex
        
        align="flex-start"
        justifyContent="space-between"
        flexDirection=['column', 'row']
      >
        <Box alignItems="flex-start" mt=4 ml=0 mb=2>
          ...
        </Box>
      </Flex>
      <Flex  align="flex-start" justifyContent="flex-start">
        <Box alignItems="flex-start" mb=12>
       ...
        </Box>
      </Flex>
    </>
  );
;

//export views; //IF I did this here, I get `Export 'views' is not defined ERROR.`
export default BlogPost;

那么，在blog.js，我愿意；

import BlogPost, views from '../components/BlogPost';

但是，这会引发 'Export 'views' is not defined` 错误。

您能帮忙重写一下吗？目标是获取blog.js 中可用的views const 值，而不是使用这种语法或任何东西。

谢谢。

【参考方案1】：

我需要注意的是，用代码示例回答这个问题并不能帮助您提高开发技能。因为组件结构看起来不正确。这就是您在将数据传递到外部时遇到问题的原因。

这种用法在我看来并不干净。这个views 值是一个动态值。所以，与exporting 分享它是没有意义的。而且，这个BlogPost 组件是为显示帖子或获取帖子而设计的，还是两者兼而有之？我认为您需要分开使用更清洁的解决方案，例如 BlogsRoute 和小时候：BlogPosts。我会在BlogsRoute 中调用端点，将数据传递给BlogPosts 并只渲染它，最后，我可以在任何我想要的地方分享views。

我假设您尝试将views 数据导出到BlogPost 的父组件。 （如果不是，我的意思是，如果你试图将这个 views 数据传递给不相关的路由或组件，你应该选择像 ReactContext 或 Redux 这样的数据存储，这是另一个需要回答的问题） 示例 1：

const BlogPostsRoute = () => 
  const  data  = useSWR(`/api/page-views?id=$slug`, fetcher);
  // use data.total as whatever you want here
  ...

  // now, BlogPost only get views data from outside and doesn't need to control/export data
  return <BlogPost views=data ? data.total : []/>

另一种解决方案可能是将回调函数传递给BlogPost 组件，如onViewsFetched，并在onSuccess 之后调用它。我相信 SWR 应该有一个 onSuccess 函数作为选项。

示例 2：

const BlogPost = (frontMatter) => 
  const  onViewsFetched /*, other props... */  = frontMatter;

...

  const  data  = useSWR(`/api/page-views?id=$slug`, fetcher,  onSuccess: onViewsFetched );

最后，您可以在父组件中再次使用BlogPost：

const BlogPostsRoute = () => 
    return <BlogPost onViewsFetched=(data, key, config) => 
        // this is the place you can use data?.total
        ...
     />

【讨论】：

你们能提供代码解决方案吗？如果没有，它对 *** 没有帮助。谢谢。

如您所见，我不知道如何正确回答这里的问题。我只是试图先解释一下出现这个问题的原因。如果你一开始就应该更好地构建你的组件结构，就不会有这样的问题。

谢谢@ozgurkececioglu - 我做了示例2...如何在blog.js 下检索'onViewsFetched'... 另外，关于const BlogPostsRoute = () => 的最后一点我也不清楚。我应该把它放在哪里？在父 JS 文件的默认导出里面？它会引发 ' expected. 错误。

我指的是<BlogPost />的父组件。我认为它在blog.js。您应该找到一种在渲染中使用此data?.total 的方法。我认为您正在尝试实现不同的目标。

那么，BlogPostsRoute 是什么？