反应路由器：将道具传递给儿童

Question

我试图通过建立一个非常基本的“组合”网站与反应路由器来学习反应。我的主要组件是：，，和。在“工作”页面上，您应该能够看到所有的项目标题和类型。点击一个特定的项目应该将您引导到该项目的详细信息页面，其中将包含该项目的其他细节。我怎么能通过道具？ 我的结构：

main.js 
    /* 
    Routes 
*/ 

var routes = (
<Router history={createHistory()}> 
    <Route path="/" component={App}> 
     <IndexRoute component={Work} /> 
     <Route path="work" component={Work} /> 
     <Route path="work/:id" component={ProjectDetail} /> 
     <Route path="about" component={About} /> 
    </Route> 
</Router> 
); 

ReactDOM.render(routes, document.getElementById('main')); 

App.js 
/* 
App 
*/ 

class App extends React.Component { 
render() { 
    return (
     <div> 
      <h1>App</h1> 
      <ul> 
       <li><Link to="/">Home</Link></li> 
       <li><Link to="/work">Work</Link></li> 
       <li><Link to="/about">About</Link></li> 
      </ul> 
      {this.props.children} 
      <footer>footer</footer> 
     </div> 
    ) 
    } 
} 

export default App; 
Work.js 
/* 
Work 
<Work/> 
*/ 

import PROJECTS from '../PROJECTS';  

class Work extends React.Component { 
render() { 
    return (
     <div> 
      <p>Work</p> 
      <ul> 
       {/* Need to loop of all projects */} 
       {PROJECTS.map(project => (
        <li key={project.id}> 
         <Project project={project} /> 
        </li> 
       ))} 
      </ul> 
     </div> 
     ) 
    } 
} 

export default Work; 
Project.js 
/* 
Project 
<Project/> 
*/ 

class Project extends React.Component { 
render() { 
    var project = this.props.project; 
    var linkTo = "/work/" + project.id; 

    return (
     <Link to={linkTo}> 
      {project.title} 
      <span> </span> 
      {project.type} 
     </Link> 
    ) 
    } 
} 

export default Project; 
ProjectDetail.js 
/* 
ProjectDetail 
<ProjectDetail/> 
*/ 

class ProjectDetail extends React.Component { 
render() { 
    return (
     <div> 
      {/* THIS IS THE INFORMATION I NEED ACCESS TO */} 
      {this.props.project.title} 
      {this.props.project.description} 
      {this.props.project.type} 
      {this.props.project.technologies} 
     </div> 
    ) 
    } 
} 

export default ProjectDetail; 
PROJECTS.js 
module.exports = [ 

{ 
    id: 0, 
    title: 'Project 0', 
    description: '0 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod dolor nobis qui est magnam magni, voluptatibus optio beatae tempore ducimus dicta ratione, iure explicabo vero, sed iusto sunt minima earum.', 
    type: 'website', 
    technologies: 'blah, blah, blah' 
}, 

{ 
    id: 1, 
    title: 'Project 1', 
    description: '1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod dolor nobis qui est magnam magni, voluptatibus optio beatae tempore ducimus dicta ratione, iure explicabo vero, sed iusto sunt minima earum.', 
    type: 'website', 
    technologies: 'blah, blah, blah' 
}, 

{ 
    id: 2, 
    title: 'Project 2', 
    description: '2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod dolor nobis qui est magnam magni, voluptatibus optio beatae tempore ducimus dicta ratione, iure explicabo vero, sed iusto sunt minima earum.', 
    type: 'website', 
    technologies: 'blah, blah, blah' 
} 

]; 

因为我从来没有明确地使用组件（其唯一堪称路线），我不知道怎么打发所有的项目信息。有没有简单的方法来做到这一点，或者我应该考虑以不同的方式构建应用程序？ 对不起，这是一个很长的文章 - 这是我第一次使用React。任何帮助将非常感激。

Answer 1

在反应路由器V2/3，它看起来像你正在使用你只需要把你想传递到Route道具。

这是一个将标题prop传递到应用程序并使用它在应用程序内呈现的示例。 你想拥有的数据的访问this.props.route.title

Answer 2

林不知道如果我能以正确的方式你的问题，但...： http://jsbin.com/tuwazeyuku/edit?html,js,output

<Route path="/" component={App} title="Hello Route"/>

然后访问道具，像这样组件项目（project.title ..等）在组件ProjectDetail？您已经定义负责路线：

<Route path="work/:id" component={ProjectDetail} /> 

您实际上两种选择：

1. 使用一些国家图书馆（例如终极版）的。

怎么样？如果您决定使用Redux，您将能够拥有全局状态。这是什么意思？这意味着在组件项目您将设置您的状态，更确切地说，您将设置您的项目状态的应用程序。感谢那在ProjectDetail你将能够得到它们。特定ID有什么特点？在ProjectDetail您可以访问您的id参数（您的项目）。它的所有你需要:)全局状态包含所有项目，所以你需要做的就是通过你收到的ID过滤这个集合。

如果太多...

接收ID，并筛选projects.js

在ProjectDetails在componentDidMount方法接收您的项目ID。 现在在现实世界的应用程序中，通常您应该为外部资源进行REST调用，在您的情况下是您的项目的详细信息。 （例如yourEndpoint/prjects/{id}/details）。您正在使用硬编码的项目，所以只是模拟在的这种行为ProdutDetail组件：

componentDidMount() { 
    const id = this.props.params.id 
    const project = PROJECTS.filter((el) => el.id === id)); 
    this.setState({ 
    project 
    }); 
} 

和渲染过程中的方法将使用此状态变量：

render() { 
    return (
     <div> 
      {/* THIS IS THE INFORMATION I NEED ACCESS TO */} 
      {this.state.project.title} 
      {this.state.project.description} 
      {this.state.project.type} 
      {this.state.project.technologies} 
     </div> 
    ) 
    } 

我的另一个问题是，为什么你到处使用PROPS？如果Redux不在这里使用，组件不会被渲染。

希望它有帮助，祝你好运！