React 将所有属性收集为一个道具并将其放入组件中或不？

Question

我正在阅读来自 https://reacttraining.com/react-router/web/example/route-config

的以下代码

const RouteWithSubRoutes = route => (
  <Route
    path={route.path}
    render={props => (
      // pass the sub-routes down to keep nesting
      <route.component {...props} routes={route.routes} />
    )}
  />
);

const RouteConfigExample = () => (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/tacos">Tacos</Link>
        </li>
        <li>
          <Link to="/sandwiches">Sandwiches</Link>
        </li>
      </ul>

      {routes.map((route, i) => <RouteWithSubRoutes key={i} {...route} />)}
    </div>
  </Router>
);

请看第一行，为什么不是这样：

const RouteWithSubRoutes = ({route}) => (

据我所知，这个箭头函数应该得到一个参数，我们通常称它为 props，它应该是一个集合，包括所有放入的属性。在这种情况下，props 应该包括 'key' 和'route'.

的所有属性

在箭头函数的组件RouteWithSubRouters中，我们要从collection props中筛选有用的属性，比如route，所以我们把参数写成({route})。

我是不是听错了？为什么改成({route})会报错？

============================================= ======================

感谢大家！现在我知道参数魔法了。我更改代码如下：

const RouteWithSubRoutes = (routeProps) => {
    console.log(routeProps.aaa)
    return (
  <Route
    path={routeProps.path}
    render={props => (
      // pass the sub-routes down to keep nesting
      <routeProps.component {...props} routes={routeProps.routes} />
    )}
  />
);

const RouteConfigExample = () => (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/tacos">Tacos</Link>
        </li>
        <li>
          <Link to="/sandwiches">Sandwiches</Link>
        </li>
      </ul>

      {routes.map((route, i) => <RouteWithSubRoutes key={i} aaa="bbb" {...route} />)}
    </div>
  </Router>
);

我得到打印 'bbb'~。参数命名为'props'.

更容易理解

Answer 1

在：

{routes.map((route, i) => <RouteWithSubRoutes key={i} {...route} />)}

特别是在 {...route} 中，您没有向组件 RouteWithSubRoutes 传递一个名为 route 的道具。通过使用传播语法 (More here)，您将 route 对象的每个属性作为单独的道具传递。因此，render 函数的第一个参数实际上并不包含 route 对象，它包含 key 和 route 的每个属性。

例如，如果路由对象如下所示：

{
    something: "value",
    somethingElse: "otherValue",
}

然后

{routes.map((route, i) => <RouteWithSubRoutes key={i} {...route} />)}

相当于做

{routes.map((route, i) => <RouteWithSubRoutes 
    key={i} 
    something={route.something}
    somethingElse={route.somethingElse} 
/>)}

您实际上想要做的是：

{routes.map((route, i) => <RouteWithSubRoutes key={i} route={route} />)}

将 route 对象作为名为 route 的道具传递的位置，允许您执行以下操作：

const RouteWithSubRoutes = ({route}) => (
    //THE RENDER OF THE ROUTE HERE
)

当你说：

As I know, this arrow function should get one parameter which we often call it as props, which should be a collection include all properties that be put in. In this case the props should include 'key' and all of properties of 'route'.

您正在了解传播语法的工作原理。 Props 应包括 key 和 route 的所有属性，并且 route 不包括名为 route 的属性，除非您的实际 route 对象包含在另一个名为 route 的对象中，如下所示：

{
    ...
    route: {
        ...
    }
    ...
}

Answer 2

在此代码中，route 是一个包含必须用于创建 <Route> 的值的对象。由于 props 名称不明确并且在同一组件中使用，因此可以将其明确定义为：

const RouteWithSubRoutes = routeProps => (
  <Route
    path={routeProps.path}
    render={props => (
      // pass the sub-routes down to keep nesting
      <routeProps.component {...props} routes={routeProps.routes} />
    )}
  />
);

或解构（component需要重命名为大写）：

const RouteWithSubRoutes = ({ path, routes, component: Component }) => (
  <Route
    path={path}
    render={props => (
      <Component {...props} routes={routes} />
    )}
  />
);

const RouteWithSubRoutes = ({route}) => (...) 将是一个错误，因为 RouteWithSubRoutes 收到的 routeProps 对象没有 route 属性.

React 将所有属性收集为一个道具并将其放入组件中或不？

React collect all properties as one props and put it into component or NOT?

reactjs

react-router-v4