onClick处理程序未向ReactDOMServer.renderToString注册

onClick handler not registering with ReactDOMServer.renderToString

本文关键字：ReactDOMServer renderToString 注册 处理 程序 onClick      更新时间：2023-10-10

我正试图复制这个小提琴：http://jsfiddle.net/jhudson8/135oo6f8/

（我也试过这个例子http://codepen.io/adamaoc/pen/wBGGQv并且存在相同的onClick处理程序问题）

并使用ReactDOMServer.renderToString 使fiddle用于服务器端渲染

我有个电话：

   res.send(ReactDOMServer.renderToString((
            <html>
            <head>
                <link href={'/styles/style-accordion.css'} rel={'stylesheet'} type={'text/css'}></link>
            </head>
            <body>

            <Accordion selected='2'>
                <AccordionSection title='Section 1' id='1'>
                    Section 1 content
                </AccordionSection>
                <AccordionSection title='Section 2' id='2'>
                    Section 2 content
                </AccordionSection>
                <AccordionSection title='Section 3' id='3'>
                    Section 3 content
                </AccordionSection>
            </Accordion>
            </body>
            </html>
        )));

Accordion元素看起来是这样的：

const React = require('react');
const fs = require('fs');
const path = require('path');

const Accordion = React.createClass({
    getInitialState: function () {
        // we should also listen for property changes and reset the state
        // but we aren't for this demo
        return {
            // initialize state with the selected section if provided
            selected: this.props.selected
        };
    },
    render: function () {
        // enhance the section contents so we can track clicks and show sections
        const children = React.Children.map(this.props.children, this.enhanceSection);
        return (
            <div className='accordion'>
                {children}
            </div>
        );
    },
    // return a cloned Section object with click tracking and 'active' awareness
    enhanceSection: function (child) {
        const selectedId = this.state.selected;
        const id = child.props.id;
        return React.cloneElement(child, {
            key: id,
            // private attributes/methods that the Section component works with
            _selected: id === selectedId,
            _onSelect: this.onSelect
        });
    },
    // when this section is selected, inform the parent Accordion component
    onSelect: function (id) {
        this.setState({selected: id});
    }
});

module.exports = Accordion;

AccordionSection组件看起来是这样的：

const React = require('react');

const AccordionSection = React.createClass({
    render: function () {
        const className = 'accordion-section' + (this.props._selected ? ' selected' : '');
        return (
            <div className={className}>
                <h3 onClick={this.onSelect}>
                    {this.props.title}
                </h3>
                <div className='body'>
                    {this.props.children}
                </div>
            </div>
        );
    },
    onSelect: function (e) {
        console.log('event:',e);
        // tell the parent Accordion component that this section was selected
        this.props._onSelect(this.props.id);
    }
});

module.exports = AccordionSection;

一切都正常，CSS也正常工作，但问题是onClick没有注册。所以点击手风琴元素并没有什么作用。有人知道为什么onClick处理程序在这种情况下可能无法注册吗？

React DOM render to string只将初始HTML作为字符串发送，不包含任何JS
您还需要一个客户端react路由器，该路由器将根据其react id将所需的JS处理程序附加到HTML。JS需要在两侧运行
快速入门的通用渲染样板。https://github.com/erikras/react-redux-universal-hot-example
另一个问题与你的问题相似。React.js服务器端渲染和事件处理程序

没有一个钩子会在ReactDOMServer.RenderToString中注册。如果你想在react组件上完成服务器端渲染+钩子，你可以将其捆绑在客户端（webpack、gump等）上，然后在服务器上使用ReactDOMServer.RenderToString。

这是一篇帮助我实现这一目标的博客文章：https://www.terlici.com/2015/03/18/fast-react-loading-server-rendering.html

相关文章：