ReactDOM.hydrate会覆盖服务端渲染结果，如果注释，相关事件就无效。如何处理？ #202

Link-Kou · 2019-11-24T12:53:54Z

疑问：
ReactDOM.hydrate 会覆盖服务端渲染的结果，而服务端渲染的时候，会传递一些参数来完成页面渲染，而客户端不执行ReactDOM.hydrate，相关事件就无法触发，而只能引入Jq来完成事件绑定。

代码实例

export default class View extends React.Component<ViewProps> {

    static getPartial(props: IProps) {
        const {ctx} = props;
        return {
            html: <Login location={ctx.req.url} appType={props.appType} csrf={props.ctx.csrf}/>
        }
    }

    render() {
        const {html, helper} = this.props;
        return (
            <html>
            <head>
                <title>TypeScript</title>
                <script src={helper.asset('../resource/js/jquery-1.11.0.min.js')}/>
                <link rel="stylesheet" href={helper.asset('login.css')}/>
            </head>
            <body>
            <div id="loginView" dangerouslySetInnerHTML={{
                __html: html
            }}
            />
            </body>
            <script src={helper.asset('../resource/client/js/login.jq.js')}/>
            <script src={helper.asset('manifest.js')}/>
            <script src={helper.asset('login.js')}/>
            </html>
        );
    }
}

/**
 * 浏览器客户端运行
 * 包含事件
 */
if (__CLIENT__) {
    ReactDOM.hydrate(<Login/>, document.getElementById('loginView'));
}

Link-Kou · 2019-11-24T13:05:52Z

@njugray 麻烦有时间，辛苦解答一下我的疑惑

njugray · 2019-11-25T02:29:00Z

参数你要通过挂 window的方式，客户端拿到结果，hydrate一个一样的 <Login location={ctx.req.url} appType={props.appType} csrf={props.ctx.csrf}/>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ReactDOM.hydrate会覆盖服务端渲染结果，如果注释，相关事件就无效。如何处理？ #202

ReactDOM.hydrate会覆盖服务端渲染结果，如果注释，相关事件就无效。如何处理？ #202

Link-Kou commented Nov 24, 2019

Link-Kou commented Nov 24, 2019

njugray commented Nov 25, 2019

ReactDOM.hydrate会覆盖服务端渲染结果，如果注释，相关事件就无效。如何处理？ #202

ReactDOM.hydrate会覆盖服务端渲染结果，如果注释，相关事件就无效。如何处理？ #202

Comments

Link-Kou commented Nov 24, 2019

Link-Kou commented Nov 24, 2019

njugray commented Nov 25, 2019