5
मैं इस बेला कॉपी करने के लिए कोशिश कर रहा हूँ के साथ पंजीकरण नहीं: http://jsfiddle.net/jhudson8/135oo6f8/onClick हैंडलर ReactDOMServer.renderToString
(मैं भी इस उदाहरण 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>
)));
अकॉर्डियन तत्व तो दिखाई देता है:
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;
सब कुछ काम करता है, और सीएसएस काम कर रहा है, लेकिन समस्या यह है कि onClick है पंजीकृत नहीं है तो accordion तत्वों पर क्लिक कुछ भी नहीं करता है। क्या किसी को पता है कि ऑनक्लिक हैंडलर इस स्थिति में क्यों पंजीकृत नहीं हो सकता है?
जे एस बिल्कुल काम कर रहा है? क्लाइंट पर काम कर रहे जेएस में से कोई भी है? –
मुझे लगता है कि लापता टुकड़ा यह है कि क्लाइंट पर मार्कअप मिलने के बाद हमें कुछ और प्रतिक्रिया कॉल करने की आवश्यकता होती है जो वास्तव में हैंडलर को बांधते हैं –