渲染道具 - 反应路线

Question

const Home = () => <div>Home</div>

const App = () => {
  const someVariable = true;

  return (
    <Switch>
      {/* these are good */}
      <Route exact path='/' component={Home} />
      <Route
        path='/about'
        render={(props) => <About {...props}  />}
      />
    </Switch>
  )
}

const About = (props) => {
  return (
    <div>
      About   
    </div>
  )
} 

在代码示例中，在

<Route
        path='/about'
        render={(props) => <About {...props}  />}
      />

当 react 遇到 react-router 的 Route 组件的 render prop 时，它传递了什么 props？

鉴于https://reactjs.org/docs/render-props.html 的文档， 渲染道具是组件用来知道要渲染什么的函数道具， 是在 react-router 中的 Route 声明中传递的 props 传递的值

Answer 1

props 由 Route 组件传递给 render prop 方法。你可以在 React Router 源代码中看到这一点。 Route 组件传递的 props 有match, location, history, staticContext。如果你想使用父组件中的 props，你定义了 render props 方法，那么你可以省略 props 参数。

render={() => <About {...props} />}

然后你会从包含 Route 的组件中获取 props。

您提供的示例没有多大意义，因为它复制了您仅在 Route 上使用“组件”道具所获得的行为。

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Route.js#L120

Answer 2

在渲染方法中传递 props 时，您会获得 react router 默认 props，就像使用 component 而不是使用隐式获取所有这些 props 匹配、位置、历史记录和 staticContext 的渲染道具一样。并且您需要提供道具作为参数，否则它的渲染方法不会将道具传递给孩子，因为它会认为它未定义。

这是 react 路由器中渲染道具的工作示例： https://codesandbox.io/s/72k8xz669j

Answer 3

我们使用带有渲染道具的Route，

<Route path = "/about" component={About} />

或，

<Route path = "/about" render= { (props) => <About {...props} } />

第二个不同于第一个，因为在第二种情况下，About 组件可以访问通过 Route 传入的 props。

比如说， 有一个 Profile 组件，

<Route path="/admin/profile"
       render={ props => (
              <Profile tabs= {"valuePassed"} {...props}  />  
        )}
 />

现在在 Profile 组件中，我们可以访问所有的道具，

this.props.tabs 在基于类的组件中提供“valuePasses”，而 props.tabs 用于功能组件。

希望这会有所帮助。