时间戳

首页 > 解决方案 > 路由渲染道具参数上的 ES6 解构

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

问题描述

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

我有以下一段代码

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个属性感到困惑？

我希望我的问题是有道理的。

谢谢

标签： javascriptreactjsecmascript-6react-routerjsx

解决方案

它只是使用 JavaScript 的对象解构来解构 prop 中的route props参数render。

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

这实际上类似于这样写：

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

推荐阅读