首页 文章

当UI在同构反应web应用程序中发生更改时,HTML标记不会更改

提问于
浏览
0

我正在使用react来创建一个样本页面,该页面使用 renderToString() 进行SEO友好页面的服务器端渲染 .

这是我的server.js代码

app.get('*', (req, res) => {
  match(
    { routes, location: req.url },
    (err, redirectLocation, renderProps) => {
      // in case of error display the error message
      if (err) {
        return res.status(500).send(err.message);
      }
      // generate the React markup for the current route
      let markup;
      if (renderProps) {
        markup = renderToString(<RouterContext{...renderProps}/>);
      } else { 
        res.status(404);
      }
      // render the index template with the embedded React markup
      return res.render('index', { markup });
    }
  );
});

我的页面是最初是静态的搜索页面,当用户输入输入时,它从后端获取数据并在同一页面中呈现组件列表 .

当我在浏览器中看到视图页面源时,我只能看到初始静态内容,而不是在后端响应后呈现的列表的html .

在组件状态更改时获取更新HTML的正确方法是什么 .

2 回答

  • 0

    您仍然需要在客户端包含组件和React本身,并在DOM中的相同基本元素上调用 React.render .

    简单地将 React.renderToString 的结果作为静态HTML提供的确只会这样做,提供 static html .

    如果您希望组件在客户端正确安装,以便它可以响应客户端事件并重新呈现状态更改,则需要将其安装在静态html上,这可以通过在页面加载时调用 React.render 来完成 . 客户端 .

    这里还有更多相关信息:https://strongloop.com/strongblog/node-js-react-isomorphic-javascript-why-it-matters/

  • -1

    将获取的数据保存到您的状态,组件将重新呈现自己 . 这样,当从后端获取新内容时,您的视图将呈现新内容 .

相关问题