Я провел много исследований, но не смог заставить его работать.
Он основан на 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'}, что и на стороне сервера. Но, похоже, я не могу передать $ {passProps} внутри тега html , программа пропустит выполнение кода внутри, поэтому рендеринг на стороне клиента также не будет работать.
Есть ли какой-нибудь способ, которым я могу получить доступ к passProps в ?
Любые предложения с благодарностью!