Question

我正在尝试通过使用react-router建立一个非常基本的“投资组合”网站来学习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'
}

];

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

Answer 1

在您正在使用的反应路由器v2 / 3中，您需要将要传递的道具放到Route上。

这是一个将标题道具传递到应用程序并使用它在应用程序内呈现的示例。 http://jsbin.com/tuwazeyuku/edit?html,js,output

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

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

Answer 2

我不确定如果我以正确的方式解决你的问题，但...... 您希望在组件ProjectDetail中访问组件Project（project.title .. etc）中的数据吗？您已经定义了一条负责的路线：

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

您实际上有两种选择：

使用某些状态库（例如Redux）。

如何？如果您决定使用 Redux ，您将能够拥有全局状态。这是什么意思？这意味着在组件项目中，您将设置您的状态，更准确地说，您将项目设置为应用程序的状态。多亏了 ProjectDetail ，您将能够获得它们。关于特定ID的是什么？在 ProjectDetail 中，您可以访问（项目的） id 参数。它所需要的全部:)全局状态包含所有项目，因此您只需要按照收到的ID过滤此集合。

如果它太多了......

接收ID并过滤 projects.js

在 projectDetMount 的 ProjectDetails 方法接收您的项目 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，那么组件将不会被渲染。

希望它有所帮助，祝你好运！

React-router：将道具传递给儿童

2 个答案: