onClick处理程序不注册ReactDOMServer.renderToString

我试图复制这个小提琴: 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处理程序可能不会在这种情况下注册?

React DOM呈现为string只发送最初的HTML作为没有任何JS的string。
您还需要一个客户端反应路由器,它将根据其react-id将所需的JS处理程序附加到HTML。 JS需要运行在双方。
通用渲染样板快速启动。 https://github.com/erikras/react-redux-universal-hot-example
另一个类似于你的问题。 React.js服务器端渲染和事件处理程序

没有任何钩子将注册ReactDOMServer.RenderToString。 如果你想完成反应组件上的服务器端渲染+钩子,你可以将它捆绑在客户端(webpack,gulp,其他)上,然后在服务器上使用ReactDOMServer.RenderToString。

这里有一个博客文章,帮助我完成: https : //www.terlici.com/2015/03/18/fast-react-loading-server-rendering.html