傳遞路線組成，反應，快速

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} /> 
    ) 
    } 
}