代码之家 › 专栏 › 技术社区 › Yang Yubo

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

isomorphic-javascript server-side-rendering reactjs node.js javascript

Yang Yubo · 技术社区 · 8 年前

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

它基于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中传入${passedProps}<脚本(>);标记时,程序将跳过内部代码的执行,因此客户端渲染将无法正常工作。

有什么方法可以访问中的passedProps吗<脚本(>?

非常感谢您的任何建议!!

1 回复 | 直到 8 年前

Alex Antonov 8 年前

在我的真实项目中,我有这样的想法:

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

你拿着这些道具,把它们传给react。客户端的js。我希望这对你有帮助。

推荐文章

TheDomis4 · nextjs:链接元素导致水合错误

1 年前

Mohammed Sabir · 下一个js getServerSideProps中的水合错误

1 年前

Kim · 带SSR的Angular 18:将优化设置为true会忽略脚本中加载的库

1 年前

Marya · 为什么我的API使用fetch发送电子邮件会产生未定义的响应,但仍然成功发送电子邮件

2 年前

Rafael · 为什么next.js中的picture元素不能使用隐藏属性?

2 年前

Dayvson Spacca · 如何使用nextjs中的服务器端组件从url获取params-id?

2 年前

Hamza Manan · 文本内容与使用i18n进行翻译的服务器呈现HTML不匹配

2 年前

Amir Abaris · Angular检测到“HttpClient”未配置为使用“fetch”API。(角17-SSR)

2 年前

kooru_hi · 通用加载函数如何在服务器端加载不可序列化的数据

2 年前

Tibo · 如何在Next JS中的_app文件中获取会话数据?

2 年前