反應路由器：將道具傳遞給兒童

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不在這裏使用，組件不會被渲染。

希望它有幫助，祝你好運！