5
sto cercando di copiare questo violino: http://jsfiddle.net/jhudson8/135oo6f8/onClick gestore non registrazione con ReactDOMServer.renderToString
(ho provato anche questo esempio http://codepen.io/adamaoc/pen/wBGGQv e lo stesso problema onClick gestore esiste)
e fare il violino lavorare per il rendering lato server, utilizzando ReactDOMServer.renderToString
ho questa chiamata:
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>
)));
l'elemento di fisarmonica si presenta in questo modo:
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;
e la componente AccordionSection assomiglia così:
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;
tutto funziona, e il CSS sta lavorando, ma il problema è che l'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?
sta JS lavorando a tutti? Qualcuno dei JS lavora sul client? –
Penso che il pezzo mancante sia che sul client una volta che il markup arriva ci sarà bisogno di fare altre chiamate React che leghino effettivamente i gestori –