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或title2或标题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

在App组件中查看您是否正在执行此类操作：

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

this.props.children是您的子组件（在您的情况下为 Test1 ）所在的位置。

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

基于json数据反应动态路由

1 个答案: