问题标签 [react-helmet]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
3 回答
4304 浏览

javascript - 单元测试反应头盔代码

我正在使用 react-helmet 将元素添加到 head 元素。

我正在尝试像这样编写单元测试:

0 投票
2 回答
4909 浏览

reactjs - 是否可以使用 React-intl 作为变量?

我正在使用react-intlreact-helmet!我正在尝试将元描述作为翻译文本传递给 Helmet,但这似乎是不可能的!

这是我所做的:

homepage.description是一个文本lang/en/en.json

我想如果可以抓取翻译并将其用作变量,它可以很容易使用,我会这样做:

如果这甚至可能?或者是否存在任何替代方法或最佳实践?

提前致谢

0 投票
1 回答
168 浏览

npm - 未安装circle ci模块

我在circle ci 上有一个容器,它通过所有测试并执行npm install 来安装package.json 中的所有包。但似乎未安装某些软件包导致circle ci失败

错误

即使是面团,我也可以看到包在 package.json

可能是什么问题呢?

0 投票
1 回答
1503 浏览

javascript - 检查是否加载了样式表然后渲染元素

我正在使用 react、redux、react-router 和 react-helmet 开发通用反应应用程序。我的应用程序中的每个页面都有单独的样式表。当客户端的路由发生变化时,起初,元素还没有样式。几毫秒后,我的页面变得丑陋了!我想要解决这个问题。我怎么知道样式表何时加载?

我的容器组件:

0 投票
1 回答
2934 浏览

reactjs - react-helmet 在服务器端输出空字符串

我正在使用 react-helmet 并且在客户端上,检查窗口中的一切都很好,并且标签正在正确输出。但是,当我在生产中启动时,标签中的 SSR 启动并没有显示在源代码中,而且我根本没有收到任何错误。

我也尝试记录“字符串化”标题标签并得到:

这是一些代码:

这是我设置标签的页面组件之一,3 个页面组件的设置都与此相同。(我已经简化了组件渲染函数和数据对象,因为它们非常大,我确信它们没有错。)

这是一些服务器代码,特别是 SSR 发生故障的地方,我正在调用 Helmet.renderStatic();

另外,如果有帮助的话,我正在使用 React Router v4。

0 投票
0 回答
778 浏览

reactjs - React 从 WP API 获取元标记

我正在使用反应头盔服务器端,我正在尝试从 Wordpress API 获取元标记,例如帖子摘录、图像、标题等。我正在使用 axios 向 WP API 发出请求。

React Helmet 正在工作,但每次我尝试通过状态从 WP API 获取标签时,它都会切换我重新渲染并且不会在 Open Graph Object Debugger 上更新它。

这是我正在使用的代码:

0 投票
0 回答
807 浏览

javascript - React-Helmet 父组件 taking priority</h1> <div id="body"><p>I have an app that loads data asynchronously and uses Helmet. I have a component in App.js, and in a child component Category.js.</p> <p>Whenever category gets </a> </h3> <div class="s-post-summary--content-excerpt"> </div> <div class="s-post-summary--meta"> <div class="s-post-summary--meta-tags tags js-tags t-cñ t-ûnet t-aspûnet-mvc t-aspûnet-mvc-4 t-actionfilterattribute"> <a href="/tags/javascript" class="post-tag flex--item mt0 js-tagname-cñ" title="" rel="tag">javascript</a><a href="/tags/reactjs" class="post-tag flex--item mt0 js-tagname-cñ" title="" rel="tag">reactjs</a><a href="/tags/react-helmet" class="post-tag flex--item mt0 js-tagname-cñ" title="" rel="tag">react-helmet</a> </div> <div class="s-user-card s-user-card__minimal"> <div class="s-user-card--info"> <div class="s-user-card--link d-flex gs4"> </div> </div> <time class="s-user-card--time" style="margin-left:5px;"> <span title="2022-04-18 08:34:11Z" class="relativetime"> </span></time> </div> </div> </div> </div><div id="question-summary-71909431" class="s-post-summary js-post-summary" data-post-id="71909431" data-post-type-id="1"> <div class="s-post-summary--stats js-post-summary-stats"> <div class="s-post-summary--stats-item s-post-summary--stats-item__emphasized" title="Score of 0"> <span class="s-post-summary--stats-item-number">0</span> <span class="s-post-summary--stats-item-unit">投票</span> </div> <div class="s-post-summary--stats-item " title="0 answers"> <span class="s-post-summary--stats-item-number">0</span> <span class="s-post-summary--stats-item-unit">回答</span> </div> <div class="s-post-summary--stats-item " title="334 views"> <span class="s-post-summary--stats-item-number">334</span> <span class="s-post-summary--stats-item-unit">浏览</span> </div> </div> <div class="s-post-summary--content"> <h3 class="s-post-summary--content-title"> <a href="/questions/46283473" class="s-link">reactjs - Open Graph爬虫不等待React组件安装</a> </h3> <div class="s-post-summary--content-excerpt"> <p>我们面临的问题与在单个页面上填充的元标记有关。这是单页网站的常见问题,但在我们的案例中更加严重,因为我们在初始加载时对网站的一大块进行服务器端渲染,其余部分在前端异步完成。正因为如此,Facebook 将初始加载中的 og 标签解释为最终标签,而不是等待安装更多组件,这将使用 Helmet 更改元标签。</p> <p>如果在浏览器中加载页面然后进行检查,则会显示正确的标签,但是当使用 Facebook 扫描时,它只会获得初始加载的标签集。</p> <p>任何有关如何解决此问题的建议将不胜感激。</p> <p>谢谢你。</p> </div> <div class="s-post-summary--meta"> <div class="s-post-summary--meta-tags tags js-tags t-cñ t-ûnet t-aspûnet-mvc t-aspûnet-mvc-4 t-actionfilterattribute"> <a href="/tags/reactjs" class="post-tag flex--item mt0 js-tagname-cñ" title="" rel="tag">reactjs</a><a href="/tags/facebook-opengraph" class="post-tag flex--item mt0 js-tagname-cñ" title="" rel="tag">facebook-opengraph</a><a href="/tags/react-helmet" class="post-tag flex--item mt0 js-tagname-cñ" title="" rel="tag">react-helmet</a> </div> <div class="s-user-card s-user-card__minimal"> <div class="s-user-card--info"> <div class="s-user-card--link d-flex gs4"> </div> </div> <time class="s-user-card--time" style="margin-left:5px;"> <span title="2022-04-18 08:34:11Z" class="relativetime"> </span></time> </div> </div> </div> </div><div id="question-summary-71909431" class="s-post-summary js-post-summary" data-post-id="71909431" data-post-type-id="1"> <div class="s-post-summary--stats js-post-summary-stats"> <div class="s-post-summary--stats-item s-post-summary--stats-item__emphasized" title="Score of 0"> <span class="s-post-summary--stats-item-number">0</span> <span class="s-post-summary--stats-item-unit">投票</span> </div> <div class="s-post-summary--stats-item " title="0 answers"> <span class="s-post-summary--stats-item-number">0</span> <span class="s-post-summary--stats-item-unit">回答</span> </div> <div class="s-post-summary--stats-item " title="91 views"> <span class="s-post-summary--stats-item-number">91</span> <span class="s-post-summary--stats-item-unit">浏览</span> </div> </div> <div class="s-post-summary--content"> <h3 class="s-post-summary--content-title"> <a href="/questions/46880661" class="s-link">javascript - 爬虫为我的 React App 子路由读取了不正确的元标记</a> </h3> <div class="s-post-summary--content-excerpt"> <p>我面临的问题是,如果我要在 Facebook 上分享我的应用程序的子路由<code>https://www.myapp.com/subroute</code>(子路由<strong>url</strong>),链接帖子的预览会显示我的 main 中的标题、描述和图像<code>root route</code> <strong><code>https://myapp.com</code></strong>。</p> <p>如何让链接预览在共享<code>subroute</code>时使用来自社交媒体的数据,而不是来自.<code>subroutes</code><code>root route</code><code>index.html</code></p> <p>我尝试在<a href="https://github.com/nfl/react-helmet" rel="nofollow noreferrer"><code>react Helmet</code></a>我的应用程序的子路由<code>https://www.myapp.com/subroute</code>(<strong>subroute url</strong>)上添加以下 Meta 属性,但没有成功:</p> </div> <div class="s-post-summary--meta"> <div class="s-post-summary--meta-tags tags js-tags t-cñ t-ûnet t-aspûnet-mvc t-aspûnet-mvc-4 t-actionfilterattribute"> <a href="/tags/javascript" class="post-tag flex--item mt0 js-tagname-cñ" title="" rel="tag">javascript</a><a href="/tags/html" class="post-tag flex--item mt0 js-tagname-cñ" title="" rel="tag">html</a><a href="/tags/facebook" class="post-tag flex--item mt0 js-tagname-cñ" title="" rel="tag">facebook</a><a href="/tags/reactjs" class="post-tag flex--item mt0 js-tagname-cñ" title="" rel="tag">reactjs</a><a href="/tags/react-helmet" class="post-tag flex--item mt0 js-tagname-cñ" title="" rel="tag">react-helmet</a> </div> <div class="s-user-card s-user-card__minimal"> <div class="s-user-card--info"> <div class="s-user-card--link d-flex gs4"> </div> </div> <time class="s-user-card--time" style="margin-left:5px;"> <span title="2022-04-18 08:34:11Z" class="relativetime"> </span></time> </div> </div> </div> </div><div id="question-summary-71909431" class="s-post-summary js-post-summary" data-post-id="71909431" data-post-type-id="1"> <div class="s-post-summary--stats js-post-summary-stats"> <div class="s-post-summary--stats-item s-post-summary--stats-item__emphasized" title="Score of 0"> <span class="s-post-summary--stats-item-number">0</span> <span class="s-post-summary--stats-item-unit">投票</span> </div> <div class="s-post-summary--stats-item " title="1 answers"> <span class="s-post-summary--stats-item-number">1</span> <span class="s-post-summary--stats-item-unit">回答</span> </div> <div class="s-post-summary--stats-item " title="6548 views"> <span class="s-post-summary--stats-item-number">6548</span> <span class="s-post-summary--stats-item-unit">浏览</span> </div> </div> <div class="s-post-summary--content"> <h3 class="s-post-summary--content-title"> <a href="/questions/47915906" class="s-link">javascript - 使用 React Helmet 显示标题</a> </h3> <div class="s-post-summary--content-excerpt"> <p>我正在使用<a href="https://www.gatsbyjs.org/" rel="nofollow noreferrer">Gatsby</a>包含的react <a href="https://github.com/nfl/react-helmet" rel="nofollow noreferrer">-</a> helmet在. 我真正想做的是将相同的标题发送到我的全局组件,以便标题显示在页面的实际文本以及头部。我如何用 React 完成这样的事情?我习惯了 Ember,我可以在应用程序控制器/路由上设置一个属性并将其传递给组件,并使用 ember-wormhole 之类的东西更新值。<code><title /></code><code><meta /></code><code><head /></code><code><Header /></code><code>pageTitle</code><code><head /></code></p> <p>我知道我可以将 Flux 用于全局状态,或者我可以将 setTitle 传递给我的页面组件,他们可以在每个页面组件上发送一个 setTitle 操作<code>componentDidMount</code>,但是有没有更好的方法来处理这个问题?也许使用 React Router 4?</p> <p>到目前为止,我能够像这样提取位置上下文:</p> <p>所以我可以在其中添加一个函数来根据路径查找页面标题,但我希望页面的“标题”改为全局设置。</p> </div> <div class="s-post-summary--meta"> <div class="s-post-summary--meta-tags tags js-tags t-cñ t-ûnet t-aspûnet-mvc t-aspûnet-mvc-4 t-actionfilterattribute"> <a href="/tags/javascript" class="post-tag flex--item mt0 js-tagname-cñ" title="" rel="tag">javascript</a><a href="/tags/reactjs" class="post-tag flex--item mt0 js-tagname-cñ" title="" rel="tag">reactjs</a><a href="/tags/react-router-v4" class="post-tag flex--item mt0 js-tagname-cñ" title="" rel="tag">react-router-v4</a><a href="/tags/gatsby" class="post-tag flex--item mt0 js-tagname-cñ" title="" rel="tag">gatsby</a><a href="/tags/react-helmet" class="post-tag flex--item mt0 js-tagname-cñ" title="" rel="tag">react-helmet</a> </div> <div class="s-user-card s-user-card__minimal"> <div class="s-user-card--info"> <div class="s-user-card--link d-flex gs4"> </div> </div> <time class="s-user-card--time" style="margin-left:5px;"> <span title="2022-04-18 08:34:11Z" class="relativetime"> </span></time> </div> </div> </div> </div> </div> <br class="cbt"> <div class="s-pagination site1 themed pager float-left"> <a class="s-pagination--item js-pagination-item is-selected" href="/tags/react-helmet?p=1" rel="" title="Go to page 2">1</a><a class="s-pagination--item js-pagination-item " href="/tags/react-helmet?p=2" rel="" title="Go to page 2">2</a><a class="s-pagination--item js-pagination-item " href="/tags/react-helmet?p=3" rel="" title="Go to page 2">3</a><a class="s-pagination--item js-pagination-item " href="/tags/react-helmet?p=4" rel="" title="Go to page 2">4</a><a class="s-pagination--item js-pagination-item " href="/tags/react-helmet?p=5" rel="" title="Go to page 2">5</a><a class="s-pagination--item js-pagination-item " href="/tags/react-helmet?p=6" rel="" title="Go to page 2">6</a><a class="s-pagination--item js-pagination-item " href="/tags/react-helmet?p=7" rel="" title="Go to page 2">7</a><a class="s-pagination--item js-pagination-item " href="/tags/react-helmet?p=8" rel="" title="Go to page 2">8</a><a class="s-pagination--item js-pagination-item " href="/tags/react-helmet?p=9" rel="" title="Go to page 2">9</a><a class="s-pagination--item js-pagination-item " href="/tags/react-helmet?p=10" rel="" title="Go to page 2">10</a></div> </div> <div id="sidebar" class="show-votes" role="complementary" aria-label="sidebar"> <div class="module js-gps-related-tags" id="related-tags"> <h4 id="h-related-tags">Reference</h4> <div data-name="javascript"> <a href="https://php.github.net.cn" class="post-tag no-tag-menu js-gps-track" target="_blank">php</a> <span class="item-multiplier"><span class="item-multiplier-x">×</span> <span class="item-multiplier-count">1429865</span> </span> </div> <div data-name="javascript"> <a href="https://c-cpp.com" class="post-tag no-tag-menu js-gps-track" target="_blank">c/c++</a> <span class="item-multiplier"><span class="item-multiplier-x">×</span> <span class="item-multiplier-count">756500</span> </span> </div> <div data-name="javascript"> <a href="https://nginx.github.net.cn" class="post-tag no-tag-menu js-gps-track" target="_blank">nginx</a> <span class="item-multiplier"><span class="item-multiplier-x">×</span> <span class="item-multiplier-count">49975</span> </span> </div> <div data-name="javascript"> <a href="https://mongodb.net.cn" class="post-tag no-tag-menu js-gps-track" target="_blank">mongodb</a> <span class="item-multiplier"><span class="item-multiplier-x">×</span> <span class="item-multiplier-count">159057</span> </span> </div> <div data-name="javascript"> <a href="https://mybatis.net.cn" class="post-tag no-tag-menu js-gps-track" target="_blank">mybatis</a> <span class="item-multiplier"><span class="item-multiplier-x">×</span> <span class="item-multiplier-count">3233</span> </span> </div> <div data-name="javascript"> <a href="https://anaconda.org.cn" class="post-tag no-tag-menu js-gps-track" target="_blank">anaconda</a> <span class="item-multiplier"><span class="item-multiplier-x">×</span> <span class="item-multiplier-count">13410</span> </span> </div> <div data-name="javascript"> <a href="https://pycharm.net.cn" class="post-tag no-tag-menu js-gps-track" target="_blank">pycharm</a> <span class="item-multiplier"><span class="item-multiplier-x">×</span> <span class="item-multiplier-count">14671</span> </span> </div> <div data-name="javascript"> <a href="https://python.github.net.cn" class="post-tag no-tag-menu js-gps-track" target="_blank">python</a> <span class="item-multiplier"><span class="item-multiplier-x">×</span> <span class="item-multiplier-count">1902243</span> </span> </div> <div data-name="javascript"> <a href="https://vscode.github.net.cn" class="post-tag no-tag-menu js-gps-track" target="_blank">vscode</a> <span class="item-multiplier"><span class="item-multiplier-x">×</span> <span class="item-multiplier-count">56040</span> </span> </div> <div data-name="javascript"> <a href="https://dockerdocs.cn" class="post-tag no-tag-menu js-gps-track" target="_blank">docker</a> <span class="item-multiplier"><span class="item-multiplier-x">×</span> <span class="item-multiplier-count">110988</span> </span> </div> <div data-name="javascript"> <a href="https://github.net.cn" class="post-tag no-tag-menu js-gps-track" target="_blank">github</a> <span class="item-multiplier"><span class="item-multiplier-x">×</span> <span class="item-multiplier-count">49000</span> </span> </div> <div data-name="javascript"> <a href="https://flask.github.net.cn" class="post-tag no-tag-menu js-gps-track" target="_blank">flask</a> <span class="item-multiplier"><span class="item-multiplier-x">×</span> <span class="item-multiplier-count">49129</span> </span> </div> <div data-name="javascript"> <a href="https://ffmpeg.github.net.cn" class="post-tag no-tag-menu js-gps-track" target="_blank">ffmpeg</a> <span class="item-multiplier"><span class="item-multiplier-x">×</span> <span class="item-multiplier-count">24037</span> </span> </div> <div data-name="javascript"> <a href="https://jmeter.net" class="post-tag no-tag-menu js-gps-track" target="_blank">jmeter</a> <span class="item-multiplier"><span class="item-multiplier-x">×</span> <span class="item-multiplier-count">16910</span> </span> </div> <div data-name="javascript"> <a href="https://matplotlib.net" class="post-tag no-tag-menu js-gps-track" target="_blank">matplotlib</a> <span class="item-multiplier"><span class="item-multiplier-x">×</span> <span class="item-multiplier-count">63493</span> </span> </div> <div data-name="javascript"> <a href="https://getbootstrap.net" class="post-tag no-tag-menu js-gps-track" target="_blank">bootstrap</a> <span class="item-multiplier"><span class="item-multiplier-x">×</span> <span class="item-multiplier-count">54641</span> </span> </div> </div> </div> </div> </div> <footer id="footer" class="site-footer js-footer" role="contentinfo"> <div class="site-footer--container"> <div class="site-footer--logo"> <a href="https://stackoverflow.com"><svg aria-hidden="true" class="native svg-icon iconLogoGlyphMd" width="32" height="37" viewBox="0 0 32 37"><path d="M26 33v-9h4v13H0V24h4v9h22Z" fill="#BCBBBB"/><path d="m21.5 0-2.7 2 9.9 13.3 2.7-2L21.5 0ZM26 18.4 13.3 7.8l2.1-2.5 12.7 10.6-2.1 2.5ZM9.1 15.2l15 7 1.4-3-15-7-1.4 3Zm14 10.79.68-2.95-16.1-3.35L7 23l16.1 2.99ZM23 30H7v-3h16v3Z" fill="#F48024"/></svg></a> </div> <nav class="site-footer--nav"> <div class="site-footer--col"> <h5 class="-title"><a href="https://stackoverflow.org.cn" class="js-gps-track" data-gps-track="footer.click({ location: 3, link: 15})">Stack Overflow 中文网</a></h5> <p>遵从 CC BY-SA 知识共享许可协议。</p> </div> </nav> </div> </footer> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?709ff2ad9744e86b5b0eee677fc13ede"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-1MW5BV8G8E"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-1MW5BV8G8E'); </script> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6117966252207595" crossorigin="anonymous"></script> </body> </html>