在客户端重新渲染组件时如何从服务器端渲染访问道具?
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
我做了很多研究,但没能成功。
它基于 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