Skip to content

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

@Link-Kou

Description

@Link-Kou

疑问:
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'));
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions