使用express-react-views模块从nodejs服务器渲染reactjs组件时，事件处理程序不会触发

Question

I am using express-react-views package to render react components in serverside(NodeJs).

I have created my react component. There is a button with an onClick event. I have tried to debug the issue but the event is not triggering. How should I fix this issue?

My server.js file:

const express = require("express");
const session = require("express-session");
const bodyParser = require("body-parser");
const router = express.Router();
const cors = require("cors");
const logger = require("morgan");
const { config } = require("./config/config");
const app = express();
app.use(
  cors({
    origin: "http://localhost:5000",
    credentials: true
  })
);
app.use(logger("dev"));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static(__dirname + "/views"));
app.set("view engine", "jsx");
app.engine("jsx", require("express-react-views").createEngine());

router.get("/test", (req, res) => {
  res.render("test");
});
app.use("/", router);

app.listen(process.env.PORT || 5000, () => {
  console.log(`App Started on PORT ${process.env.PORT || 5000}`);
});

My test.jsx file:

import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: "Initial data..."
    };
    this.updateState = this.updateState.bind(this);
  }
  updateState() {
    this.setState({ data: "Data updated..." });
  }
  render() {
    return (
      <div>
        <button onClick={this.updateState}>CLICK</button>
        <h4>{this.state.data}</h4>
      </div>
    );
  }
}
export default App;

In test.jsx file, the onClick event is not firing. I'm stuck with this issue. Please help.

Answer 1

As evident from the docs -

This is an Express view engine which renders React components on server. It renders static markup and does not support mounting those views on the client.

The library is just meant to render static markup and not support any client side mounting for isomorphic apps.

So basically you're not sending any js to the client ( with React and ReactDOM ) to mount the rendered component on the client and make your eventHandlers work.

To solve this, you might want to have a build pipeline ( using webpack, rollup, babel, etc) to bundle up your js files and serve them over a static server. Also for server rendering have a look at -> ReactDomServer .