Question

我在我的node.js应用程序中使用react.js作为模板库。我正在为我的反应组件使用jsx语法。我有一个像/ entities这样的路由渲染entities.jsx文件（它是一个视图）。我的entities.jsx文件中有以下代码。我试图在我的代码中调用onclickhandler并且它不能正常工作。我没有使用React.render显式地呈现它，但是当我点击localhost：/ entities但是onclick处理程序没有触发时，组件在浏览器中显示。

  var MyComponent = React.createClass({
    alertMessage: function() {
       alert(this.props.name);                             
   },
    render: function () {
      return (
       <div onClick={this.alertMessage}>
        Hello {this.props.name}
       </div>
     );
    }
 });

我在网上看到的例子渲染了嵌入在html中的jsx脚本和在html div标签内呈现的组件，但我试图在我的node.js应用程序中使用react.js。我不想在html标签内渲染它，但组件应该基于URL呈现并且应该是动态的

我的节点应用程序中的index.js文件中有以下代码段。我点击了视图＆＃39;实体＆＃39;通过我的index.js文件呈现视图实体。

app.get('/entities', function(req, res) {
  res.render('entities', {
    title: 'Entities - Turkey Disclosure',
    name: 'Entities',
    selection: 'header-entities'
  });
});

Answer 1

如果我找到了你，你可以使用React.renderToString()在节点应用程序中进行反应。 React不会将onClick和其他事件语句直接插入到标记中。如果要保留这些事件，则应在已具有服务器呈现标记的节点上调用React.render()。 React将保留它并仅附加事件处理程序，使您具有非常高性能的首次加载体验。

There's a nice article解释了React中三种渲染方法之间的区别。

React.js onclick处理程序无法正常工作

1 个答案: