传递路线组成，反应，快速

Question

鉴于这种路线：

import { Router } from 'express' 
const router = new Router() 

const staticPages = [ 
    'privacy', 
    'terms' 
] 

staticPages.forEach(page => { 
    router.get(`/${page}`, (req, res) => { 
    res.render('base', { bundle: 'static' }) 
    }) 
}) 

export default router 

我需要动态地构建从.pug文件使用路由${page}到dangerouslySetInnerHTML一个组成部分。这是我的页面调用组件的样子：

import React from 'react' 
import ReactDOM from 'react-dom' 
import Page from 'app/components/base-page' 
import Static from 'app/components/static' 

let page = 

ReactDOM.render(
    <Page > 
    <Static content={this.route} /> 
    </Page>, 
    document.getElementById('content') 
) 

参数content={this.route}需要从路由控制器和匹配${page}使得部件<Static content={this.route} />知道从.pug文件dangerouslySetInnerHTML拉动。如何才能做到这一点？

编辑：为了澄清，组件本身会是这个样子..

export default class Static extends Component { 

    componentWillMount() { 
    this.setState({ 
     __html: '' 
    }) 

    let page = '/content/terms' 

    got({page}) 
     .then(resp => { 
     console.log(resp) 
     return resp 
     }) 
     .then(content => { 
     this.setState({ 
      __html: content 
     }) 
     }) 
     .catch((err) => { 
     console.log(err) 
     }) 
    } 

    render() { 
    return (
     <div dangerouslySetInnerHTML={this.state} /> 
    ) 
    } 
} 

我也加入到terms.html另一条路线：

import { Router } from 'express' 
const router = new Router() 

const staticPages = [ 
    'privacy', 
    'terms' 
] 

staticPages.forEach(page => { 
    router.get(`/content/${page}`, (req, res) => { 
    res.send(`content/${page}.html`) 
    console.log(req, res) 
    }) 
}) 

export default router 

Answer 1

彼时使用这样的2个不同的快速路由器：

static-content.js

个

import { Router } from 'express' 
const router = new Router() 

const staticPages = [ 
    'privacy', 
    'terms' 
] 

staticPages.forEach(page => { 
    router.get(`/content/${page}`, function (req, res) { 
    res.render(`content/${page}`, function (err, html) { 
     console.log(err) 
     res.send(html) 
    }) 
    }) 
}) 

export default router 

static.js

import { Router } from 'express' 
const router = new Router() 

const staticPages = [ 
    'privacy', 
    'terms' 
] 

staticPages.forEach(page => { 
    router.get(`/${page}`, (req, res) => { 
    res.render('base', { bundle: 'static' }) 
    }) 
}) 

export default router 

这里的页面和组件JSX：

静态page.jsx

import React from 'react' 
import ReactDOM from 'react-dom' 
import Page from 'app/components/base-page' 
import Static from 'app/components/static' 

let page = document.location.pathname 

ReactDOM.render(
    <Page > 
    <Static content={page} /> 
    </Page>, 
    document.getElementById('content') 
) 

静态component.jsx

import React, { Component } from 'react' 
import got from 'got' 

export default class Static extends Component { 

    componentWillMount() { 
    this.setState({ 
     __html: '' 
    }) 

    let page = '/content' + this.props.content 

    got(page) 
     .then(resp => { 
     return resp.body 
     }) 
     .then(content => { 
     this.setState({ 
      __html: content 
     }) 
     }) 
     .catch((err) => { 
     console.log(err) 
     }) 
    } 

    render() { 
    return (
     <div dangerouslySetInnerHTML={this.state} /> 
    ) 
    } 
}