Javascript 反应路由器：向儿童传递道具

我试图通过使用React路由器构建一个非常基本的“公文包”站点来学习React。我的主要组件是：应用程序、工作、项目和项目详细信息。在“工作”页面上，您应该能够看到所有的项目缩略图和标题。单击某个特定项目会将您发送到该项目的详细信息页面，该页面将包含该项目的其余详细信息。如何将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'));

main.js
/*
路线
*/
变量路由=(
);
render（routes，document.getElementById（'main'））；

-

App.js
/*
应用程序
*/
类应用程序扩展了React.Component{
render（）{
返回(
应用程序

家
工作
关于

{this.props.children}
页脚
)
}
}
导出默认应用程序；

-

Work.js
类工作扩展了React.Component{
render（）{
返回(
工作


{/*需要循环所有项目*/}
{PROJECTS.map（project=>(


))}

)
}
}
导出默认工作；

-

Project.js
类项目扩展了React.Component{
render（）{
var project=this.props.project；
var linkTo=“/work/”+project.id；
返回(
{project.title}
{project.type}
)
}
}
导出默认项目；

-

ProjectDetail.js
类ProjectDetail扩展了React.Component{
render（）{
返回(
{/*这是我需要的信息*/}
{this.props.project.title}
{this.props.project.description}
{this.props.project.type}
{this.props.project.technologies}
)
}
}
导出默认项目详细信息；

我可以访问我的项目组件中的数据，但是我如何将其传递给ProjectDetail，因为我从未明确使用ProjectDetail组件（仅在路由中使用）

编辑：我应该补充一点，我认为从技术上讲，我并没有试图将道具传递给孩子，因为一旦您被发送到ProjectDetail，项目将不再呈现。这就不可能了吗？

您需要使用路由处理程序来控制路由处理程序的实例。在那里，您可以将道具传递给组件。React路由器将母子组件解耦，任何状态传播都需要在路由中进行

更新 根据您的编辑，在您的案例中，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>
        )
    }
}

类ProjectDetail扩展React.Component{
render（）{
让project=PROJECTS.find（（item）=>item.id==this.props.params.id）；
返回(
{project.title}
{project.description}
{project.type}
{project.technologies}
)
}
}

您能否提供一个小例子，说明我将如何实现这一点？关于此处理程序的文档不多。添加了一个代码段，该代码段应适用于您的案例。谢谢！因为我在我的Work.js文件中导入项目，所以我必须在ProjectDetail.js中再次导入它们，对吗？这不是有点多余吗？有没有办法只导入一次？虽然这是一个与原始问题不同的主题，但我建议您开始阅读有关Flux的内容，因为它使React中的状态管理和传播更容易。我觉得这是最容易的，但你应该找你最喜欢的。为了回答你的确切问题，进口并不昂贵，因为“需要”会缓存它们。谢谢。我一直想调查这些。

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;

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