Question

我无法理解为什么我们使用类似{... props}的东西

例如，在我的代码中（当我学习路由器时），我会做类似的事情

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'导入React；

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

export default home;

这将记录类似

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

但是，如果我从家中移除{... props}，它将不会记录此内容

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

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

Answer 1

赋予render的{{1}}道具的函数用route props listed in the documentation调用。通过将它们传播到Route组件中，您就可以通过这些道具，因此它们也可以在Home组件道具中使用。

如果仅将路由道具传递到Home的{{1}}道具赋予的功能中的组件，请考虑改用render道具：

Route

Answer 2

基本上是工作中的传播语法。它允许将Iterable扩展到需要参数或参数的地方。

例如，你有一个命令，

event.clientY

您想要a，b和c作为组件Module的道具。

传递它们的一种方法是这样，

window.onclick = function (e) {
  var i;
  i = document.createElement('div');
  i.style.height = "10px";
  i.style.width = "10px";
  i.style.backgroundColor = "black";
  i.style.position = "absolute";
  i.style.left = e.clientX+'px';
  i.style.top = e.clientY+'px';
  document.body.appendChild(i);

}

但是利用ES6的扩展语法，就是这样，

    use strict;
    use warnings;

    my (@list,$server);

    @list = qw/server1.net server2.net server3.net/;

    foreach $server(@list) {
    #calling sub-routines
    command1(); 
    command2();
    }

    sub command1 {
    print $server;
    system("command1");
    }

    sub command2 {
    print $server;
    system("command2");
    }

更容易吧？道具只是命令。您的代码表示您希望Home组件继承上面记录的其父组件Route的所有props。您可以手动添加所有所需的道具，但谁有时间呢？

详细了解传播语法css。

在反应中传播道具

2 个答案: