react页面获取url中输入的值并呈现（通过doit函数实现）

最近需要做react页面获取url中传递的id，这个流程还是有点复杂的。url携带id传送给express后台，后台将id映射到jade引擎中，jade引擎通过doit函数传送给reactDOM，再通过react中的props将值传递给需要的页面，对应页面进行网络请求。

1、实现效果图

2、代码详细分析

2.1 url将值传递给express后台

输入的url传送到app中，app对这个url进行解析并得到id值。

app中获取id值，并传递到router中的detail中

app.get('*', function (req, res) {
//通过req获取浏览器中输入的url
  str = req.url
  if(str.indexOf('/question?id=')!=-1){
    //获取输入的id值
    num = str.replace(/[^0-9]/ig,"")
    //在此处进行跳转，并携带输入的id
    res.redirect('/detail'+'?id='+num)
  }
 }
}) 

此处在router捕获'/detail'中获取传过来的id，并将id通过res的render发送到前端。

router.get('/detail',
  function (req, res) {    
    //获取id值
    const id = req.param('id')
    //通过render将id值传递到前端
    res.render('question', { id:JSON.stringify(req.param('id'))});
  });

如果可以的话，这两步可以合成一步，直接用app来获取，并进行转发。

2.2 jade引擎获取并传递

此处前端采用的是jade引擎映射到打包的react里面，因此后端res.render传递的值可以直接在jade中显示出来。

doctype html
html
  head
     //- 引用打包的呈现内容的文件
    script(src='/build/question.js')
body
  //- 呈现后端传过来的id
  h1 !{id}
  block content
    #react-container
    //- 扩展打包的question文件，将值通过doit携带到打包的文件当中
    script.
        question.default.doit(!{id})

2.3 webpack打包配置

webpack打包，我之前写过一篇关于这个的专题，如果有需要参考的话，可点入这个链接：

下面我仅介绍这个如果jade中这样写，webpack该如何定义输入输出。

module.exports = {
  cache: true,
  entry: {
    question:'./resourcepage/index.js'
  },
  output: {
    path: path.resolve(__dirname, 'public/build'),
    filename: '[name].js',
    //此处这句话一定要加，不然jade中使用script.question.default.doit(!{id})这句话会报question找不到
    libraryTarget: 'umd',
    library: '[name]',
  },
……
};

2.3 reactDOM接收

webpack打包的页面，不再像之前一样，需要加入doit来获取jade传过来的参数。

在需要的地方直接用this.props.name便可获得对应的id，若有对应的router，也可以通过props获得。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery';

class ResInformation extends Component {
    // 状态机
    constructor(props) {
        super(props);
        this.state = {
            resource: ''
        }
    }
    //根据资源id查看资源详情
    getdata() {
        $.ajax({
            url: "/api_v1.1/knowledge_resource/resourceDetail_v1_1",
            type: "GET",
            dataType: "json",
            async: false,
            data: { "r_id": this.props.name },//此处的this.props.name便是通过dom中传过来的输入的id
            success: function (data) {
                if (data.errorCode == '0') {
                    this.setState({
                        resource: data.msg
                    });
                }
                else {
                    console.log('资源不存在');
                }
            }.bind(this),
            error: function (xhr, status, err) {
            }.bind(this)
        });
    }
    //页面加载前获取网络数据
    componentWillMount() {
        this.getdata();
    }
    render() {
        return (
            <div>
               {数据请求之后，根据需求进行网络数据呈现}
            </div>
        )
    }
}
//在引用的时候，通过doit获取jade中传过来的id，在获取网络请求的时候，便可通过props获得id，请求得到想要的数据
export default {
    doit: function doit(id) {
        ReactDOM.render(<ResInformation name={id} />, document.getElementById('react-container'));
    }
}

3、结束语

这种方式相当于数据按照url->后端app->jade引擎->react页面进行了一个传递，如果有需要的，可以参考和借鉴，有不懂得也可以提问反馈。