无法理解组件是如何传递给子元素的，以及渲染方法在React.js中是如何工作的

Question

我是react的初学者，只知道react的基础知识，我理解props是如何工作的，但在本教程中，我跟随他们传递了完整的组件作为prop，这里是代码

子元素代码:

import { Redirect, Route } from "react-router-dom";
const Privateroute = ({ component: Component, ...rest }) => {
console.log("this is the passed component", Component);

return (
<div>
<Route {...rest}  render={(props) => localStorage.getItem("authToken") ? (
<Component {...props} />
) : (
<Redirect to="/" />
)
}
/>
</div>
);
};

export default Privateroute;

我不明白组件:component在组件参数中的平均值，在哪里…最后，意思是，肾脏可以在一些基本步骤中解释这些

这里是父代码

<Route exact path="/signup"   component={Register}    />

Answer 1

语法{component: Component, ...rest}称为解构赋值，这意味着传递的props应该包含一个名为component的属性，该属性的类型为Component，其余的将是一个包含父组件在props对象中传递的所有其他属性的对象。

正如您所看到的，rest散布在Route组件上，这意味着所有其他属性(除了component属性)将作为道具传递给Route组件。

参见:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Answer 2

赋值给新的变量名属性可以从对象中解包，并分配给与对象属性名称不同的变量。

参考，我采取了这些例子和解释-我建议在继续学习javascript或react之前仔细阅读。https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

component: component explanation

const o = {p: 42, q: true};
const {p: foo, q: bar} = o;
console.log(foo); // 42
console.log(bar); // true

…rest -说明

对象解构中的RestECMAScript提案的Rest/Spread属性(阶段4)将Rest语法添加到解构中。其余属性收集自己尚未被解构模式选取的可枚举属性键。

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}
a; // 10
b; // 20
rest; // { c: 30, d: 40 }

& lt;路线{. .休息}在

这意味着你把rest对象中的所有属性都传递给Route组件。

<Route {..rest} >

route组件是react-router库中的一个可使用组件- https://reactrouter.com/web/api/Router

建议阅读react-router lib的工作原理或观看教程以获得清晰的理解

Answer 3

...rest是道具的剩余键值，这基本上是ES6的功能，这是不受MERN堆栈。component: Component这基本上创建了一个名为Component的变量，它保存键component的值。