Question

我是新的在nodejs做出反应。我在onClick处理程序上使用了反应文档，但它对我不起作用。我一直在四处寻找，似乎没什么用。

快递路线：

var express = require('express');
var router = express.Router();
var React = require('react');
var ReactDomServer = require('react-dom/server');
var Component = require("../public/javascripts/component.jsx");

router.get('/', function (req, res, next) {
  var html = ReactDomServer.renderToString (
    React.createElement (Component)
  );
  res.send(html);
});

module.exports = router;

component.jsx

var React = require('react');

module.exports = class SayHello extends React.Component {
  constructor(props) {
    super(props);

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    alert("Test");
  }

  render() {
    return (
      <button onClick={() => this.handleClick()}>
        Say hello
      </button>
    );
  }
}

Answer 1

ReactDomServer只会为组件生成HTML字符串...而且只会使您的网页在服务器上... 为了添加事件监听器，你仍然需要客户端代码。

假代码： - 服务器端 -

router.get('/', function (req, res, next) {
  var html = ReactDomServer.renderToString (
    <div id="root"><Component/><script src="client-code.js"></script></div>
  );
  res.send(html);
});

- 客户端 -

ReactDOM.render(<Component/>, document.getElementById('root'));

以下代码显示了server-render和client-render之间的区别。您可以修改一些并添加.html然后在浏览器中打开。

class SayHello extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this
      .handleClick
      .bind(this);
  }

  handleClick() {
    alert("Test");
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Say hello
      </button>
    );
  }
};
var test = ReactDOMServer.renderToString(<SayHello/>);
document
  .getElementById('root')
  .innerHTML = test + '<button onclick="window.clientRender()">client render</button>';

window.clientRender = function() {
  ReactDOM.render((<SayHello/>), root);
};

反应组件onClick不会工作

1 个答案: