我做了很多研究，但没能成功。
它基于 express.js 并在同构应用程序中使用react。
我使用 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>`;
}
问题是我想让客户端呈现与服务器端具有相同的初始 Prop {'foo':'bar'} 。但似乎我不能真正在 html < script > 标签内传递 ${passedProps} ，程序将跳过执行其中的代码，因此客户端渲染将无法正常工作。
有什么方法可以访问 < script > 中的 passedProps 吗？
非常感谢任何类型的建议!!
最佳答案
我的真实项目中有类似的东西:
<script>window.__INITIAL_PROPS__ = JSON.stringify(${passed_props})</script>
您正在获取这些 Prop 并将它们传递到客户端的 react.js 中。 希望对您有所帮助。
关于javascript - 在客户端重新渲染组件时如何从服务器端渲染访问 Prop ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50264943/