Question

我做了很多研究，但未能使它发挥作用。

它基于express.js并在同构应用程序中作出反应。

我使用renderToString（）来解析我的组件并将其发送回客户端。

let passedProps = {'foo':'bar'};

const html = ReactDOMServer.renderToString(
            React.createElement(myComponent, passedProps)
    );
res.send(renderFullPage(html, passedProps));

我必须在客户端重新渲染它才能激活事件处理程序。

function renderFullPage(html, passedProps) {
  return `
        <!DOCTYPE html>
        <html lang="en">
          <head>
            ........
          </head>
          <body>
            <div id="root">${html}</div>
          ......
            <script>
             function render() {
                ReactDOM.render(
                  React.createElement(
                    myComponent,
                    ${passedProps}
                  ),
                  document.querySelector('#root')
                );
             }
            render();

            </script>
          </body>
        </html>`;
}

问题是我想让客户端渲染与服务器端具有相同的初始道具{＆＃39; foo＆＃39;：＃39; bar＆＃39;}。但似乎我无法在html＆lt;中传递$ {passedProps}。脚本＆gt;标签，程序将跳过执行内部代码，因此客户端呈现也不会起作用。

有什么方法可以访问＆lt;中的passProps脚本＆gt;？

任何建议都要非常感谢!!

Answer 1

我在我的真实项目中有类似的东西：

<script>window.__INITIAL_PROPS__ = JSON.stringify(${passed_props})</script>

你正在拿这些道具并将它们传递给客户端的react.js。我希望这会对你有所帮助。

如何在客户端重新呈现组件时从服务器端呈现访问道具？

1 个答案: