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组件的渲染道具时，它将传递什么道具？

请参阅https://reactjs.org/docs/render-props.html上的文档，渲染道具是组件用来了解要渲染什么的功能道具，是值传递给在react-router的Route声明中埋藏的props

Answer 1

我们将Route与渲染道具一起使用，

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

OR

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

第二个不同于第一个，在第二种情况下，关于组件可以访问通过路线的道具。

例如，有一个“个人资料”组件

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

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

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

希望这会有所帮助。

Answer 2

道具通过Route组件传递到render prop方法。您可以在React Router源代码中看到这一点。路线组件传递的道具具有match, location, history, staticContext。如果要使用来自父组件的props（在其中定义render props方法），则可以省略props参数。

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

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

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

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

Answer 3

在渲染方法中传递道具时，您将获得反应路由器的默认道具，就像使用component而不是使用隐式获取所有这些道具匹配，位置，历史和staticContext的渲染道具一样。并且您需要提供props作为参数，否则render方法不会将props传递给子级，因为它将认为undefined。

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

渲染道具-反应路线

3 个答案: