React-router：將道具傳遞給孩子

Question

我正在嘗試通過使用react-router構建一個非常基本的“ portfolio”站點來學習React。 我的主要組件是：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;

我可以訪問Project組件中的數據，但是由於我從未顯式使用ProjectDetail組件（僅在路由中使用），如何將其傳遞給ProjectDetail？

編輯：我應該補充一點，我想從技術上講，我不會嘗試將道具傳遞給孩子，因為一旦將您路由到ProjectDetail，就不再渲染Project。 這使這不可能嗎？

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