在React中将道具从路由传递到组件

Question

我使用的反应与反应路由器的项目，我需要传递道具的子组件从路由。

我有这样的设置：

App.js

<Switch>
  <Route exact path='/' render={()=><Home num="2" someProp={100}/>} />
  <Route path='/roster' component={Roster}/>
</Switch>

Home.js

import React from 'react'

const Home = () => (
  <div>
    <h1>Welcome to the Tornadoes Website!</h1><p>{this.props.num}</p>
  </div>
)

export default Home

问题是主组件总是给出错误“未定义”。我无法理解如何解决这个问题。如果我从Home.js中移除道具，组件渲染就很好。但当我尝试访问道具时，会出现错误。

Answer 1

<Switch>
  <Route exact path='/' render={()=><Home num="2" someProp={100}/>} />
  <Route path='/roster' component={Roster}/>
</Switch>

家

import React from 'react'

const Home = (props) => (
  <div>
    <h1>Welcome to the Tornadoes Website!</h1><p>{props.someProp} {props.num} </p>
  </div>
)

export default Home

由于您在App.js中将道具命名为someProp以访问它，因此您需要执行props.someProp，该名称必须与您传递给它的名称相匹配。持有“2”的num道具也是如此。

父组件渲染子组件中的示例

现在在孩子

const Child = (props) => (
<div> 
 {props.prop1} will render hello {props.fun} will render this is a fun prop 
</div>
)

Answer 2

无状态组件不会通过this访问道具。它们作为函数的参数传入。

const Home = props => (
  <div>
    <h1>Welcome to the Tornadoes Website!</h1><p>{props.num}</p>
  </div>
)