如何在Sails项目中使用express-react-views作为视图引擎

1、用webstorm打sails项目,在当前项目目录下执行下面命令,安装express-react-views必要组件:

npm install express-react-views react react-dom

2、安装必要组件后,配置sails视图引擎,打开config/views.js添加如下代码:

extension: 'jsx',

getRenderFn: function () {

  return require('express-react-views').createEngine();

}

3、创建一个测试控制器TestController(或执行generate new controller test),代码如下:

module.exports = {

  test: function (req,res) {

    return res.view('hello',{ name: "kimi" });

  }

};

4、创建一个hello视图,代码如下:

var React = require('react');

class HelloMessage extends React.Component {

 render() { 

 return Hello {this.props.name}; 

 }

}

module.exports = HelloMessage;

5、配置policies和routers的信息,如下:

// policies.js

'test/test': true 

// routers.js

'GET /test': { action: 'test/test'  }

6、启动项目,打开浏览器查看效果,如下图:


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容