javascript - 基于 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，我应该从组件“test1”中获得以下内容:

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

当我点击本地路径/Title1 时，控制台中没有出现任何错误，但组件 Test1 也没有显示。

Answer 1

看看您是否在应用程序组件中执行类似的操作:

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

this.props.children 是您的子组件(在您的情况下 Test1)所在的位置。

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