Question

我试图在我的Express后端使用React。目前，我使用React作为我的模板语言。

我的观点是.jsx文件。

/* Express */
const express = require('express');
const app = express();
const server = require('http').createServer(app);
const session = require('express-session');
...
/* Express application parameters */
app
    .set('views', __dirname + '/views')
    .set('view engine', 'jsx')
    .engine('jsx', require('express-react-views').createEngine())
    .use(bodyParser.urlencoded({ extended: false }))
    .use(sessionStorage)
    .use(express.static('public'));

// Express routing defined in ./routes/index.js 
require('./routes')(app);

index.js

/* Express routing */
module.exports = function (app) {
    app.get('/subscribe', require('./subscribe').get);
    app.post('/subscribe', require('./subscribe').post);
    app.get('/', require('./login').get);
    app.post('/', require('./login').post);
    app.all('/userlist', require('./home').all);
    app.get('/lobby', require('./lobby').get);
    app.get('/playdario', require('./game').get);
    app.post('/playdario', require('./game').post);
    app.all('/logout', require('./logout').all);
}

这是订阅页面的路由处理程序：

subscribe.js

exports.get = (req, res) => {
    res.render('subscribe', { 'title': 'Subscription' });
}

我尝试作为测试（如在React教程中）每秒刷新一个Clock组件。

subscribe.jsx

  var React = require('react');
    var ReactDOM = require('react-dom');
    var DefaultLayout = require('./layouts/default');

    class Clock extends React.Component {
        constructor(props) {
            super(props);
             this.state = { date: new Date() };
    }

    componentDidMount() {
        this.timerID = setInterval(
            () => this.tick(),
            1000
        );
    }

    componentWillUnmount() {
        clearInterval(this.timerID);
    }

    tick() {
        this.setState({
            date: new Date()
        });
    }

    render() {
        return (
            <DefaultLayout>
            <div>
                <h1>Hello, world!</h1>
                <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
            </div>
            </DefaultLayout>
        );
      }
    }
    module.exports = Clock;

我的所有视图都由包含html标记的默认组件组成。

default.jsx

var React = require('react');

class DefaultLayout extends React.Component {
    render() {
        return (
            <html>
                <head><title>{this.props.title}</title></head>
                <body>
                    {this.props.children}
                </body>
            </html>
        );
    }
}

module.exports = DefaultLayout;

但问题是，当我到达页面时，时钟只显示一次。但时钟根本不令人耳目一新。我尝试了另一个带有按钮的示例，该按钮正在更改处于其状态的文本值，但它也不起作用...

我必须在我的res.render中使用**。jsx *文件吗？当我发送一个像我在项目开始时所做的html文件时，我没有找到如何通过我的html文件从Express发送信息，就像我可以用.twig或.jsx这样的视图...

我做错了什么？

Answer 1

由于它没有重新渲染，我认为没有触发tick()，因为状态在那里更新。尝试执行以下操作：

componentDidMount() {
    this.timerID = setInterval(
        this.tick,
        1000
    );
}

或

componentDidMount() {
    var self = this
    this.timerID = setInterval(
        () => self.tick(),
        1000
    );
}

因为this不在箭头函数的范围内

Answer 2

我不相信express-react-views实际安装组件。根据{{3}}：

这是一个Express视图引擎，可以启用React组件服务器。它呈现静态标记，不支持安装它们对客户的看法。

因此，不会安装任何组件，只会生成标记。这意味着永远不会调用componentDidMount，因为组件本身永远不会在浏览器中实例化。如果您希望React组件与元素交互，则需要在客户端呈现它。

React组件只渲染一次

2 个答案: