渲染道具-反应路线

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路由器的一部分）的渲染道具时，它会传递什么道具？

鉴于https://reactjs.org/docs/render-props.html ，render prop是一个函数prop，组件使用它来知道要渲染什么，是传递给props的值，该props埋在react router中的Route声明中

Answer 1

当在render方法中传递道具时，您将获得默认道具，就像使用组件而不是使用render道具一样，render道具隐式地获得所有这些道具的匹配、位置、历史和静态上下文。你需要提供道具作为一个参数，否则渲染方法不会把道具传递给孩子，因为它会认为它是未定义的。

下面是react router中渲染道具的工作示例：https://codesandbox.io/s/72k8xz669j

Answer 2

我们使用带有渲染道具的路线作为，

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

或者，

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

第二个与第一个不同的是，在第二种情况下，About组件可以访问通过路线到达的道具。

比如说，有一个外形组件，

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

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

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

希望这有帮助。

Answer 3

道具由路由组件传递到渲染道具方法。您可以在React路由器源代码中看到这一点。路由组件传递的道具具有匹配、位置、历史记录和静态上下文。如果要使用父组件中的道具（在父组件中定义render props方法），则可以忽略props参数。

渲染={（）=

然后，您将从包含路由的组件中获取道具。

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

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