阵营基于JSON数据动态路由

Question

我想生成一些基于JSON数据文件如下路线：

routes.jsx

import React from 'react'; 
import { Route, Router, IndexRoute } from 'react-router'; 
import ReactDOM from 'react-dom'; 

import App from './index.jsx'; 
import Test1 from './test1.jsx'; 
import Test2 from './test2.jsx'; 
import TestWrapper from './wrapper.jsx'; 

import url from './url.json'; 

var routes = url.url.map(function(el){ 
    return (<Route key={el} path={el} component={Test1} />); 
}); 

ReactDOM.render((
    <Router> 
    <Route path="/" component={App} > 
     {routes} 
    </Route> 
    </Router> 
), document.getElementById('app')); 

url.json：

{ 
    "url": [ 
    "title1", 
    "title2", 
    "title3", 
    "title4" 
    ] 
} 

和我的test1.jsx：

import React from 'react'; 

class Test1 extends React.Component { 
    render() { 
    return (
     <div> 
     <h2>Test 1</h2> 
     <p>hjgjgjh</p> 
     <p>{this.props.key}</p> 
     </div> 
    ); 
    } 
} 

export default Test1; 

如果我打我的本地路径/标题1或标题2或标题3我应该从组件“测试1”以下内容：

 <div> 
     <h2>Test 1</h2> 
     <p>hjgjgjh</p> 
     <p>{this.props.key}</p> 
     </div> 

，但我不这样做，我也应该有{} this.props.key印刷在屏幕上。我只收到{App}组件内的任何内容。

我不知道这是否正常工作：

var routes = url.url.map(function(el){ 
    return (<Route key={el} path={el} component={Test1} />); 
}); 

whenI打我的本地路径/标题1我没有得到任何错误的控制台，但Test1的没有得到任何显示的组件。

Answer 1

看看你正在做这样的事情在你的应用程序组件：

render() { 
    return (
     <div> 
      App component 
      {this.props.children} 
     </div> 
    ); 
} 

的this.props.children是你的子组件（在你的情况Test1的）的位置。

编辑：如果你想传递额外的道具，你也可以使用React.cloneElement()。