在客户端重新渲染组件时如何从服务器端渲染访问道具?

How to access the props from server-side rendering when re-render the component in client side?

我做了很多研究,但没能成功。

它基于 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>`;
}

问题是我想让客户端呈现与服务器端具有相同的初始道具 {'foo':'bar'}。但似乎我不能真正在 html