il gestore onClick non si registra con ReactDOMServer.renderToString

Sto cercando di copiare questo violino: http://jsfiddle.net/jhudson8/135oo6f8/

(Ho anche provato questo esempio http://codepen.io/adamaoc/pen/wBGGQv e esiste lo stesso problema del gestore onClick )

e fai in modo che il violino funzioni per il rendering lato server, usando ReactDOMServer.renderToString

Ho questa chiamata:

  res.send(ReactDOMServer.renderToString((        Section 1 content   Section 2 content   Section 3 content     ))); 

l’elemento Accordion si presenta così:

 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 ( 
{children}
); }, // 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;

e il componente AccordionSection sembra così:

 const React = require('react'); const AccordionSection = React.createClass({ render: function () { const className = 'accordion-section' + (this.props._selected ? ' selected' : ''); return ( 

{this.props.title}

{this.props.children}
); }, 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;

tutto funziona e il CSS funziona, ma il problema è che onClick non viene registrato. Quindi, fare clic sugli elementi della fisarmonica non fa nulla. Qualcuno sa perché il gestore onClick potrebbe non essere registrato in questa situazione?

React DOM render to string invia solo l’HTML iniziale come stringa senza JS.
È necessario anche un router di reazione lato client che colleghi i gestori JS richiesti all’HTML in base ai loro ID di reazione. Il JS deve essere eseguito su entrambi i lati.
Bollitore di resa universale per l’avvio rapido. https://github.com/erikras/react-redux-universal-hot-example
Un’altra domanda che è simile alla tua. React.js Serverside rendering e gestori di eventi

Nessuno dei ganci si registrerà con ReactDOMServer.RenderToString. Se si desidera eseguire rendering lato server + hook sul componente di risposta, è ansible raggrupparlo sul client (webpack, gulp, qualunque) e quindi utilizzare anche ReactDOMServer.RenderToString sul server.

Ecco un post sul blog che mi ha aiutato a realizzare questo: https://www.terlici.com/2015/03/18/fast-react-loading-server-rendering.html