时间戳

首页 > 解决方案 > 如何使用 React 在 Next.js 中导出 const 值？

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

问题描述

我正在尝试将一个从 BlogPost.jsconst调用的值导出views到 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` 错误。

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

谢谢。

标签： javascriptreactjsjsxnext.jsreact-props

解决方案

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

这种用法对我来说看起来并不干净。该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
        ...
    } />
}

推荐阅读