Ale*_*lls 11 html javascript css node.js reactjs
我试图复制这个小提琴: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渲染到字符串只会将初始HTML作为字符串发送而不需要任何JS.
您还需要一个客户端响应路由器,它将根据其react-id将所需的JS处理程序附加到HTML.JS需要双方运行.
通用渲染样板,可快速启动.https://github.com/erikras/react-redux-universal-hot-example
与您的相似的另一个问题.React.js Serverside渲染和事件处理程序
小智 5
没有任何钩子会注册ReactDOMServer.RenderToString.如果你想在你的react组件上完成服务器端渲染+钩子,你可以将它捆绑在客户端(webpack,gulp等),然后在服务器上使用ReactDOMServer.RenderToString.
这是一篇博文,帮助我实现了这个目标:https: //www.terlici.com/2015/03/18/fast-react-loading-server-rendering.html