Javascript onClick处理程序未向ReactDOMServer.renderToString注册
我正试图模仿这把小提琴: (我也试过这个例子 同样的Javascript onClick处理程序未向ReactDOMServer.renderToString注册,javascript,html,css,node.js,reactjs,Javascript,Html,Css,Node.js,Reactjs,我正试图模仿这把小提琴: (我也试过这个例子 同样的onClick处理程序问题也存在) 并使用ReactDOMServer.renderToString 我接到这个电话: res.send(ReactDOMServer.renderToString(( <html> <head> <link href={'/styles/style-accordion.css'} rel={'
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>
)));
res.send(ReactDOMServer.renderToString((
第一节内容
第2节内容
第3节内容
)));
手风琴元素如下所示:
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;
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;
const React=require('React');
常数fs=要求('fs');
const path=require('path');
const Accordion=React.createClass({
getInitialState:函数(){
//我们还应该监听属性更改并重置状态
//但我们不支持这个演示
返回{
//使用所选节初始化状态(如果提供)
已选择:this.props.selected
};
},
渲染:函数(){
//增强节内容,以便我们可以跟踪单击并显示节
const children=React.children.map(this.props.children,this.enhanceSection);
返回(
{儿童}
);
},
//返回具有单击跟踪和“活动”感知的克隆节对象
增强部分:函数(子级){
const selectedId=this.state.selected;
const id=child.props.id;
返回React.cloneElement(子级{
关键字:id,
//节组件使用的私有属性/方法
_所选:id==selectedId,
_onSelect:this.onSelect
});
},
//选择此部分后,通知父手风琴组件
onSelect:函数(id){
this.setState({selected:id});
}
});
module.exports=手风琴;
AccordionSection组件看起来是这样的:
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;
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;
const React=require('React');
const AccordionSection=React.createClass({
渲染:函数(){
const className='accordion section'+(this.props._selected?'selected':'');
返回(
{this.props.title}
{this.props.children}
);
},
onSelect:函数(e){
console.log('event:',e);
//告诉父级Accordion组件已选择此部分
this.props.\u onSelect(this.props.id);
}
});
module.exports=AccordionSection;
一切都正常,CSS也正常工作,但问题是onClick没有注册。因此,单击手风琴元素没有任何作用。有人知道为什么在这种情况下onClick处理程序可能无法注册吗?React DOM render to string只将初始HTML作为字符串发送,而不发送任何JS。
您还需要一个客户端react路由器,它将根据所需的JS处理程序的react id将其附加到HTML。JS需要在两侧运行。
用于快速启动的通用渲染样板
另一个问题与你的问题相似 所有钩子都不会向ReactDOMServer.RenderToString注册。如果要在react组件上完成服务器端呈现+挂钩,可以将其捆绑到客户端(webpack、gulp等),然后在服务器上使用ReactDOMServer.RenderToString 以下是一篇帮助我实现这一目标的博文:
JS到底在工作吗?有任何JS在客户端工作吗?我认为缺少的一点是,一旦标记到达客户端,我们需要进行更多的React调用来实际绑定处理程序