在反应中传播道具[复制]

Question

我不明白为什么我们要用{…道具}

例如在我的代码中（当我学习路由器时）我做了这样的事情

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import Home from './home.js';

const route = () => {
    return(
        <BrowserRouter>
            <Switch>
                <Route path ="/"  render ={(props) => <Home {...props}/>} />
            </Switch>
        </BrowserRouter>
    )
}

export default route;

这里，这个传递函数/可能称之为给他道具

从React导入；

const home =  (props) =>  {
  console.log(props)
  return (
  <div> home </div>
  );
}

export default home;

这将记录类似这样的内容

{match: {…}, location: {…}, history: {…}, staticContext: undefined}

但是如果我把{…道具}从家里移除，它就不会记录这个

{match: {…}, location: {…}, history: {…}, staticContext: undefined}

任何人都可以分步/或详细地解释发生了什么，我们为什么需要它？

Answer 1

这基本上是工作中的扩展语法。它允许在需要参数或参数的地方展开iterable。

例如，你有一个判决，

params = { a: 1, b: 2, c: 3}

您需要a、b和c作为组件模块的支柱。

通过他们的一个方法是这样的，

<Module a=params['a'] b=params['b'] c=params['c'] />

但是利用ES6的扩展语法，它只是，

<Module {...params} /}

更容易对吧？道具只是鸡巴。您的代码暗示您希望Home组件继承您在上面登录的其父组件路由的所有道具。你可以手动添加所有想要的道具，但是谁有时间呢？

在这里阅读有关扩展语法的更多信息。

Answer 2

给的渲染道具的函数被调用，路由道具列在留档中。通过在您的Home组件上传播它们，您只是传递这些道具，以便它们也可以在您的Home组件道具中使用。

如果您只将路径道具传递给“代码> >代码>路由> <代码>的函数<代码>渲染>代码>，请考虑使用<代码>组件< /代码>支持：

<Route path="/" component={Home} />