Question

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

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

使用ReactDOMServer.renderToString

使服务器端呈现小提琴

我有这个电话：

   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处理程序可能没有注册？

Answer 1

React DOM渲染到字符串只会将初始HTML作为字符串发送而没有任何JS 您还需要一个客户端响应路由器，它将根据其react-id将所需的JS处理程序附加到HTML。 JS需要在双方都运行通用渲染样板，可快速启动。 https://github.com/erikras/react-redux-universal-hot-example
另一个与你相似的问题。 React.js Serverside rendering and Event Handlers

Answer 2

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

这是一篇帮助我完成此任务的博文： https://www.terlici.com/2015/03/18/fast-react-loading-server-rendering.html

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

2 个答案: