Gatsby不渲染组件

文章/答案/技术大牛

发布

1回答

reactjs、gatsby、reach-router

我试图建立一个简单的页面与导航，页脚和组件之间的哪些内容应该被渲染的导航依赖。不幸的是，只有Home works才能正常工作(Nav和Footer都存在)。当我点击nav中的任何其他链接时，Gatsby只呈现带有内容的组件，而没有Nav和Footer (例如，就是AboutUs)。Contact path="contact" /> <Footer /> </div>

浏览 14提问于2020-12-08得票数 1

回答已采纳

1回答

可以在Gatsby中使用样式化组件来设计StaticImage样式吗？

gatsby、styled-components、gatsby-image

我尝试在Gatsby中使用样式化组件设置StaticImage样式： display: block;grid-row: 1/1; `; <HeroImage alt="portfol

浏览 5提问于2021-10-23得票数 1

2回答

Gatsby:单击In-Route Anchor Element可重新渲染

javascript、reactjs、gatsby

我设置了一个最小的Gatsby页面来测试Gatsby何时重新呈现，我发现只需单击一个常规的路由内(散列)锚点链接，就会导致重新呈现。为什么会这样呢？有没有办法防止这种情况发生？

浏览 18提问于2019-05-09得票数 6

1回答

Gatsby - Open Graph和Twitter卡不工作

html、reactjs、gatsby

content="width=device-width, initial-scale=1, shrink-to-fit=no"> import { useLocation }from "@reach/r

浏览 20提问于2021-05-03得票数 1

1回答

Gatsby和Netlify CMS预览渲染StaticQuery时出错

javascript、graphql、gatsby、netlify、netlify-cms

我在Netlify CMS中使用Gatsby，在Netlify CMS中预览模板时遇到了问题。有一个可以像预期的那样工作。它从markdown和frontmatter获取数据，并与Netlify CMS小部件链接，还有一个通过useStaticQuery钩子获取数据的组件。This is likely a bug in Gatsby and if refreshing the page does not fix it, please open an issue in https://github.com/ga

浏览 52提问于2019-11-18得票数 1

3回答

React / Gatsby -根据屏幕大小呈现不同的组件

html、css、reactjs、graphql、gatsby

(注意:我对React/GraphQL不是很熟悉，所以请对我从容不迫)。我正在用Gatsby建立一个博客，我的导航栏根据屏幕尺寸改变它的外观。在我的导航栏中间是博客的徽标。当他们在移动设备上查看时，我只希望渲染实际的徽标(不包括文本)(我有一个带有完整徽标的图像和一个带有缩短徽标的图像)。到目前为止，我的方法是1.创建两个独立的SiteNavLogo-组件和2.使用以下代码块检查当前窗口大小(我删除了所有与此问题无关的代码，并将其替换为"...")3.有条件地渲染两个log

浏览 19提问于2020-10-25得票数 0

回答已采纳

1回答

如何向GraphQL文件查询添加变量

graphql、gatsby

我正在使用gatsby-image插件在我的Gatsby站点上显示图像。在我的GraphQL查询中，我希望能够将一个变量传递给relativePath参数，因为这个查询(在父组件中)正在为许多需要图像的组件运行。不过，我似乎想不出怎么做。...} } `)

浏览 42提问于2019-08-10得票数 1

1回答

我如何将它分配给另一个组件？

reactjs、gatsby

例如，当我呈现一个标头组件时，我传递的道具如下所示：但是，我怎么能用索引来做到这一点呢？是否在索引中使用它们的支持调用所有组件？我在索引中使用了{ children }，但是如果我从来不传递道具，那么盖茨比怎么知道这个变量是什么呢？

浏览 2提问于2020-03-14得票数 2

回答已采纳

3回答

如何用Gatsby图像渲染svg文件？

javascript、react-hooks、graphql、gatsby

目前，在我的项目中，我有一个包含所有svg文件的文件夹，从graphql获取它们的查询如下： allFile(filter: {extension: {regex: "/(svg)/"}, relativeDirectory: {eq: "svg"}}) { node { name }}

浏览 29提问于2022-03-29得票数 0

1回答

Material-UI和gatsby官方示例

material-ui

根据官方示例，我正在使用gatsby和material UI，我想知道是否必须将withRoot包装器添加到使用MUI的每个组件中，或者是否可以只包装我想使用MUI的最高级别的组件？我在渲染和IDK如何追踪原因方面遇到了问题。在dev中，一切都很好，但在prod中，<Grid>对齐是关闭的，在初始渲染时，没有应用任何样式。它们在第一次喷漆后的一到两分钟内使用。我完全遵循了这个示例，只包装了我的全局布局组件。

浏览 0提问于2018-05-17得票数 4

1回答

如何使用GraphQL从内容中查询图像？

reactjs、gatsby、contentful、gatsby-image

我一直试图遵循教程和使用，但我无法得到任何渲染。为了使用gatsby映像，我的查询需要如何更改？

浏览 3提问于2021-12-17得票数 0

2回答

Gatsby / GraphQL应用程序-部署时的呈现和样式问题(Netlify和激增)

graphql、gatsby、web-deployment、netlify、surge.sh

这里是我的按钮样式在本地的外观： `gatsby-plugin-styled-components`, resolve: `gatsby-source-filesystem`, "gatsby

浏览 2提问于2021-03-17得票数 0

回答已采纳

1回答

尝试在主要特色产品图像下方显示其他图像缩略图

reactjs、gatsby、moltin

，然后在一个新组件中引用它，但没有额外的图像呈现。看看其他的实现，例如Gatsby Store example，它使用了Thumbnails，可以得到一个很小的、可点击的紫色条带渲染，但没有图像。该商店使用Shopify和localFile存储进行图像渲染，因此此用例不适用。/components/ Badge‘导入工卡从'../ Shopkit‘导入{shopkit} 从

浏览 17提问于2019-07-11得票数 0

回答已采纳

1回答

在Gatsby站点下拉菜单中显示/隐藏区段

reactjs、jsx、gatsby

我想获取要在组件中使用的员工姓名和图像。", "gatsby-transformer-remark", ],我已经得到了做下拉工作的组件：import { useState, useEffec

浏览 7提问于2022-01-25得票数 1

回答已采纳

2回答

如何使用图像组件将图像动态添加到Gatsby中的页面？

reactjs、gatsby、gatsby-image

所以我有一个图像组件，可以渲染两个不同的图像，但我希望能够将图像组件添加到任何页面，并将特定图像作为道具传递进来，而不是必须为我需要使用的每个图像硬编码一个新的查询。有没有办法在gatsby中使用graphql做到这一点？下面是我当前的图像组件代码 import { graphql, useStaticQuery } from "gatsby" import Img from "gatsby-imageconst d

浏览 31提问于2020-09-16得票数 1

1回答

gatsbyjs (SSR)服务器中的新数据渲染

gatsby、server-side-rendering

我使用gatsby-node.js和gatsby-ssr.js文件创建了一个gatsby js电子商务网站。我注意到它很像一个预渲染，然后是一个服务器端渲染！如果在数据库中创建新数据会发生什么，gatsby实际上会将新数据放在服务器端并在服务器中生成代码吗？

浏览 10提问于2019-07-29得票数 0

回答已采纳

2回答

如何使组件包含在页面之间？

next.js

也许SSR应该是这样的，但nextjs添加了像gatsby一样的静态渲染。没有一种方法可以防止组件重新呈现吗？比如:页眉不应该在页面之间改变。<RestOfTheApp> </RestOfTheApp> )我假设你可以使用redux来保持组件状态，但是当你只需要获取一些博客内容时，整个页面的重新渲染就显得臃肿了。我已经测试了一些基本的布局，它似乎仍然闪

浏览 3提问于2020-06-08得票数 0

1回答

React Native中的屏幕刷新问题

react-native、react-navigation

我正在制作一个使用firestore的应用程序。每当firestore中的数据发生更改时，我的屏幕上都会显示两组数据，一组包含更改前的数据，另一组显示更改后的数据。例如，如果我有两个data a,b，并且b更新为c，则屏幕将显示a,b a,c 在两个屏幕之间切换后，屏幕被刷新，一切都变得正常。如何让屏幕只显示一组新数据有什么帮助吗？ import React,{Component} from 'react'; import { View,ScrollView,AsyncStorage, StyleSheet, Dimensions, SafeAreaView,Platf

浏览 17提问于2020-12-25得票数 0

2回答

WebpackError:未定义窗口

reactjs、gatsby

我在这里遇到了同样的问题，Coverflow在gatsby develop上运行良好，但在构建时抛出了一个错误: WebpackError: window is not defined WebpackError

浏览 12提问于2019-01-08得票数 3

回答已采纳

1回答

安装插件后Gatsby站点中断

reactjs、gatsby、jamstack、gatsby-plugin-feed

我在安装gatsby插件时遇到了问题。我的设置：gatsby new my-app当我试图从Gatsby库安装一个插件时，我会在安装插件后获得以下错误消息钩子只能在函数组件的bo dy中调用。发生这种情况可能有以下原因之一：您可能有React的不匹配版本和呈现器(作为React )，您可能违反了Hooks的规则，在同一个应用程序中可能有多个React副本，参见fb.me/

浏览 6提问于2020-06-29得票数 1

回答已采纳

点击加载更多