路由渲染道具参数上的 ES6 解构

Question

这可能是一个奇怪的问题
但是这里有......

我有以下代码

const About = props => {
  console.log(props.match);
  console.log(props.location);
  console.log(props.history);

  return <div>About</div>;
};

const App = () => (
  <div>
    <BrowserRouter>
      <Route path="/about" component={About} />
    </BrowserRouter>
  </div>
);

而且可以简写成 ES6 的对象解构特性，像这样

const App = () => (
  <div>
    <BrowserRouter>
      <Route
        path="/about"
        render={({match, location, history}) => {
          console.log(match);
          console.log(location);
          console.log(history);
          return <div>About</div>;
        }}
      />
    </BrowserRouter>
  </div>
);

我很困惑渲染属性如何知道箭头函数从道具中提取3个属性？？

我希望我的问题有意义。

谢谢

Answer 1

它只是使用 JavaScript 的 object destructuring 来破坏 render 属性中的 route props 参数。

如文档中所述，路由道具是一个由

组成的对象

• match
• location
• history

这其实和这样写很相似：

<Route
    path="/about"
    render={(routeProps) => {
      const { match, location, history } = routeProps;
      return <div>About</div>;
    }}
  />