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

Question

我正在尝试将名为 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
        width="100%"
        align="flex-start"
        justifyContent="space-between"
        flexDirection={['column', 'row']}
      >
        <Box alignItems="flex-start" mt={4} ml={0} mb={2}>
          ...
        </Box>
      </Flex>
      <Flex width="100%" 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 值，而不是使用这种语法或任何东西。

谢谢。

Answer 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
        ...
    } />
}