Javascript 如何使用React导出Next.js中的常量值？

我正在尝试将名为

views

的

const

值从BlogPost.js导出到blog.js

这里是

BlogPost.js

从“React”导入React；
从“swr”导入useSWR；
从“逗号编号”导入格式；
进口{
使用颜色模式，
标题
文本，
弯曲
盒子，
徽章，
链接
工具提示
}来自“@chakra ui/react”；
从“../lib/fetcher”导入fetcher；
const BlogPost=（frontMatter）=>{
常数{
标题
模式，
总结，
形象,，
品牌，
拉斯顿，
firstCreatedOn
}=锋面物质；
const{colorMode}=useColorMode（）；
常量secondaryTextColor={
灯光：“灰色，700”，
深色：“灰色。400”
};
常量slug=frontMatter.\u资源路径
.replace（'Blog\\'，''）
.替换（'.mdx'，''）；
const{data}=useSWR（`/api/page views？id=${slug}`，fetcher）；
常量视图=数据？总计；
//console.log（'views'，views）；//这是我正在尝试导出的。
返回(
...
...
);
};
//导出{视图}//如果我在这里这样做，我得到的“导出”视图“是未定义的错误`
导出默认博客帖子；

然后，在

blog.js

中，我做到了

import BlogPost，{views}来自“../components/BlogPost”；

但是，这会抛出一个“导出”视图未定义为“错误”

你能帮我重写一下吗？目标是获取

blog.js

中可用的

视图

常量值，而不是使用此语法或任何东西

---

谢谢。

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

我觉得这个用法不干净。此

视图

值是一个动态值。因此，与导出的

共享它是没有意义的。而且，这个
BlogPost
组件是为显示帖子或获取帖子而设计的，还是两者都设计的？我认为您需要将其用于更清洁的解决方案，如
BlogsRoute
，作为一个孩子：
BlogPosts
。我会在
BlogsRoute
中调用端点，将数据传递到
blogsposts
，并只渲染它，最后，我可以在任何我想要的地方共享
视图

我假设您试图将
视图
数据导出到
BlogPost
的父组件。（如果不是，我的意思是，如果您试图将此
视图
数据传递给不相关的路由或组件，您应该选择一个数据存储，如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 : []}/>
}

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

constblogpostsroute=（）=>{
返回{
//这是您可以使用数据的地方？总计
...
} />
}
您能提供代码解决方案吗？如果没有，则对StackOverflow没有帮助。谢谢。正如你所看到的，我不知道如何正确回答这里的问题。我刚刚试着解释一下，首先出现这个问题的原因是什么。如果您首先应该更好地构建组件结构，那么就不会有这样的问题了。谢谢@ozgurkeceioglu-我做了示例2。。。如何在
blog.js
下检索“onViewsFetched”。。。另外，关于
const BlogPostsRoute=（）=>{
的最后一点我不清楚。我应该把它放在哪里？在父JS文件的默认导出中？它会抛出一个
}。
错误。我指的是
的父组件。我想是在
blog.js
中。您应该找到一种在渲染内部使用此
data？.total
的方法。我认为你在试图实现一些不同的东西。那么，什么是
BlogPostsRoute
？