无法理解组件如何传递给子元素以及 render 方法在 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:Component 在组件参数中是什么意思，...rest 从哪里来，最后意思是，kidnly 可以在一些基本步骤中解释这些

这是家长代码

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

Answer 1

...rest 有剩余的 props 键值，这基本上是 ES6 特性，不受 MERN 堆栈的影响。 component: Component 这基本上创建了一个名为 Component 的变量，它保存键 component.

的值

Answer 2

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

如你所见，rest 分布在第 Route 组件上，这意味着所有其他属性（除了 component 属性）将作为 props 传递到 Route 组件。

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

Answer 3

正在分配给新的变量名属性可以从对象中解包并分配给名称与对象属性.

不同的变量

引用这些示例和解释的地方 - 我建议在继续学习 javascript 或做出反应之前仔细阅读这篇文章。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

component：组件说明

const o = {p: 42, q: true};
const {p: foo, q: bar} = o;

console.log(foo); // 42
console.log(bar); // true

...休息 - 解释

在对象解构中休息 Rest/Spread Properties for ECMAScript 提案（第 4 阶段）将剩余语法添加到解构中。 Rest 属性收集剩余的自己的可枚举属性键，这些键尚未被解构模式选中。

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

<路线 {..rest} >

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

<Route {..rest} >

路由组件是来自 react-router 库的随时可用的组件 - https://reactrouter.com/web/api/Router

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

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

unable to understand how component is passed to child element and how render method works in React.js

reactjs

mern