onClick处理程序没有注册ReactDOMServer.renderToString [英] onClick handler not registering with ReactDOMServer.renderToString
问题描述
我正在尝试复制这个小提琴：
http://jsfiddle.net/jhudson8/135oo6f8 /
I am trying to copy this fiddle: http://jsfiddle.net/jhudson8/135oo6f8/
（我也试过这个例子
http://codepen.io/adamaoc/pen/wBGGQv
和相同的 onClick 处理程序问题存在）
(I also tried this example
http://codepen.io/adamaoc/pen/wBGGQv
and the same onClick handler problem exists)
并使用 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元素如下所示：
the Accordion element looks like so:
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组件如下所示：
and the AccordionSection component looks like so:
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处理程序可能无法在这种情况下注册？
everything works, and the CSS is working, but the problem is that the onClick doesn't get registered. So clicking on the accordion elements does nothing. Does anyone know why the onClick handler might not get registered in this situation?
推荐答案
React DOM渲染到字符串只发送初始HTML作为一个没有任何JS的字符串。
你需要一个客户端反应路由器，它将根据反应ID将所需的JS处理程序附加到HTML。 JS需要在双方运行。
通用渲染样板，用于快速启动。 https://github.com/erikras/react-redux-universal-hot-示例
另一个与您类似的问题。 React.js Serverside渲染和事件处理程序
React DOM render to string only sends the initial HTML as a string without any JS.
You need a client side react router as well which will attach the required JS handlers to the HTML based on their react-id's. The JS needs to run on both sides.
Universal rendering boilerplate for quick start. https://github.com/erikras/react-redux-universal-hot-example
Another question which is similar to yours. React.js Serverside rendering and Event Handlers
这篇关于onClick处理程序没有注册ReactDOMServer.renderToString的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
