React-router：将道具传递给孩子

Question

我正在尝试通过使用react-router构建一个非常基本的“ portfolio”站点来学习React。 我的主要组件是：，和。 在“工作”页面上，您应该能够看到所有项目标题和类型。 单击特定的项目应将您转到该项目的详细信息页面，其中将包含该项目的其余详细信息。 如何传递的道具？ 我的结构：

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

];

由于我从未明确使用该组件（它仅在Routes中调用），因此我不确定如何将所有项目信息传递给。 有没有简单的方法可以做到这一点，或者我应该考虑以不同的方式构造应用程序吗？ 抱歉，这么长的帖子-这是我第一次使用React。 任何帮助将非常感激。

Answer 1

在看起来像您正在使用的React Router v2 / 3中，只需将要传递的道具放在Route 。

这是一个将标题道具传递到应用程序并在应用程序内渲染的示例。 http://jsbin.com/tuwazeyuku/edit?html,js，输出

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

然后像这样访问道具： this.props.route.title

Answer 2

我不确定如果我能以正确的方式解决您的问题，但是...您想从组件ProjectDetail上的组件Project（project.title ..等）访问数据吗？ 您已经定义了一条路线，该路线负责：

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

您实际上有两个选择：

1. 使用一些状态库（例如Redux）。

怎么样？ 如果您决定使用Redux ，那么您将可以具有全局状态。 这是什么意思？ 这意味着在组件Project中，您将设置状态，更准确地说，将项目设置为应用程序的状态。 由于ProjectDetail中的功能，您将能够获得它们。 特定的ID呢？ 在ProjectDetail中，您可以访问（项目的） id参数。 它所需要的：)全局状态包含所有项目，因此您所需要做的就是根据收到的ID过滤此集合。

如果太多...

2. 接收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方法当然会使用以下状态变量：

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，则不会渲染组件。

希望对您有帮助，祝您好运！