如何使用 React 在 Next.js 中導出常量值？

Question

我想導出一個const的值稱為views從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
        ...
    } />
}