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

Question

我試圖通過建立一個非常基本的「組合」網站與反應路由器來學習反應。我的主要組件是：App，Work，Project和ProjectDetail。在「工作」頁面上，您應該可以看到所有項目縮略圖和標題。點擊一個特定的項目應該將您引導到該項目的詳細信息頁面，其中將包含該項目的其他細節。我如何將Project的道具傳遞給ProjectDetail？

我的文件：

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 
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 
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 
class ProjectDetail extends React.Component { 
    render() { 
     return (
      <div> 
       {/* THIS IS WHAT INFORMATION I NEED */} 
       {this.props.project.title} 
       {this.props.project.description} 
       {this.props.project.type} 
       {this.props.project.technologies} 
      </div> 
     ) 
    } 
} 

export default ProjectDetail; 

我可以訪問我的項目組件中的數據，但我怎麼能傳遞一起ProjectDetail因爲我從來沒有明確地使用ProjectDetail組件（僅限於我的路由使用）？

編輯：我應該補充一點，我想技術上我沒有試圖將道具傳遞給孩子，因爲一旦你被路由到ProjectDetail項目不再呈現。這是否使這不可能？

Answer 1

您需要使用您的路由的createElement處理程序來控制路由處理程序的實例化。在那裏你可以傳遞道具給組件。 React-Router解耦母子組件，需要在路由中完成任何狀態傳播。

更新 根據您的編輯，你的情況ProjectDetail必須使用this.props.params.id，像重新查詢適用的項目...

ProjectDetail.js

class ProjectDetail extends React.Component { 
    render() { 
     let project = PROJECTS.find((item)=>item.id == this.props.params.id); 
     return (
      <div> 
       {project.title} 
       {project.description} 
       {project.type} 
       {project.technologies} 
      </div> 
     ) 
    } 
}