javascript - 将动态元标记添加到 React 静态站点,使用 StaticSiteGeneratorPlugin 创建

标签 javascript reactjs webpack

我们正在使用 StaticSiteGeneratorPlugin 做一个网站, 是一个网站插件,可以在本地呈现网站,然后我们可以将其上传到 S3。

我们的代码基本上看起来像this github project

我们正在使用 React Helmet来管理我们的头部、元信息和所有这些,并且在浏览器中运行良好,但在运行产品构建时却不行。

在 entry.js 中我有以下内容。缺少将 Helmet 生成的字符串添加到生成的 html 中的方法,或者如果有比 helmet 更好的管理器可以更好地与我们正在使用的插件一起工作。

export default function render(locals, callback) {
    const element = React.createElement(Root, props);
    const helmet = Helmet.renderStatic();
    const html = ReactDOMServer.renderToString(element);
    callback(null, `<!DOCTYPE html>${html}`);
}

最佳答案

试试这个,但是“不要写关于 html 的博客”:

const helmet = Helmet.renderStatic();
var html = ReactDOMServer.renderToString(element);
html.replace("</head>", helmet+"</head>");
callback(null, `<!DOCTYPE html>${html}`);

关于javascript - 将动态元标记添加到 React 静态站点,使用 StaticSiteGeneratorPlugin 创建,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47721481/

相关文章:

javascript - useContext() react 钩子(Hook)没有返回正确的值

javascript - 在 Vue.js 中包含 bootstrap 抛出 jQuery not found 错误

laravel - 如何将 webpack 路径更改为 Laravel 中的上层目录(根)?

javascript - 如何使用 jquery 为表中的序列号列提供连续编号

javascript - 使重叠的 d3.js 雷达图元素透明

javascript - React 生命周期方法的类属性

jquery - 如何通过Webpack导入和使用jQuery库?

javascript - Reactjs:无限滚动不起作用

php - 使用 Ajax 在 React.js 中提交表单

javascript - 如何传入 props 以仅显示表中的某些列?