onClick处理程序没有注册ReactDOMServer.renderToString

Question

I am trying to copy this fiddle: http://jsfiddle.net/jhudson8/135oo6f8/ 我试图复制这个小提琴： http ： //jsfiddle.net/jhudson8/135oo6f8/

(I also tried this example http://codepen.io/adamaoc/pen/wBGGQv and the same onClick handler problem exists) （我也试过这个例子http://codepen.io/adamaoc/pen/wBGGQv并且存在相同的onClick处理程序问题）

and make the fiddle work for server side rendering, using ReactDOMServer.renderToString 并使用ReactDOMServer.renderToString使小提琴工作为服务器端渲染

I have this call: 我有这个电话：

   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>
        )));

the Accordion element looks like so: 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;

and the AccordionSection component looks like so: 而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;

everything works, and the CSS is working, but the problem is that the onClick doesn't get registered. 一切正常，CSS正在运行，但问题是onClick没有注册。 So clicking on the accordion elements does nothing. 所以点击手风琴元素什么都不做。 Does anyone know why the onClick handler might not get registered in this situation? 有谁知道为什么onClick处理程序可能无法在这种情况下注册？

Answer 1

React DOM render to string only sends the initial HTML as a string without any JS. React DOM渲染到字符串只会将初始HTML作为字符串发送而不需要任何JS。
You need a client side react router as well which will attach the required JS handlers to the HTML based on their react-id's. 您还需要一个客户端响应路由器，它将根据其react-id将所需的JS处理程序附加到HTML。 The JS needs to run on both sides. JS需要双方运行。
Universal rendering boilerplate for quick start. 通用渲染样板，可快速启动。 https://github.com/erikras/react-redux-universal-hot-example https://github.com/erikras/react-redux-universal-hot-example
Another question which is similar to yours. 另一个与你相似的问题。 React.js Serverside rendering and Event Handlers React.js Serverside渲染和事件处理程序

Answer 2

None of the hooks will register with ReactDOMServer.RenderToString. 没有任何钩子会注册ReactDOMServer.RenderToString。 If you want to accomplish server side rendering + hooks on your react component, you could bundle it on the client (webpack, gulp, whatever), and then also use ReactDOMServer.RenderToString on the server. 如果你想在你的react组件上完成服务器端渲染+钩子，你可以将它捆绑在客户端（webpack，gulp等），然后在服务器上使用ReactDOMServer.RenderToString。

Here's a blog post that helped me accomplish this: https://www.terlici.com/2015/03/18/fast-react-loading-server-rendering.html 这是一篇博文，帮助我实现了这个目标： https ： //www.terlici.com/2015/03/18/fast-react-loading-server-rendering.html

onClick处理程序没有注册ReactDOMServer.renderToString

问题描述

2 个解决方案

解决方案1
6 已采纳 2016-03-31 03:51:42

解决方案2
5

onClick处理程序没有注册ReactDOMServer.renderToString

问题描述

2 个解决方案

解决方案1 6 已采纳 2016-03-31 03:51:42

解决方案2 5

解决方案1
6 已采纳 2016-03-31 03:51:42

解决方案2
5