了解 Reactjs 中组件的破坏性分配

Question

我有以下 React 组件：

export default function AuthExample () {
  return (
    <Router>
      <div>
        <AuthButton/>
        <ul>
          <li><Link to="/public">Public Page</Link></li>
          <li><Link to="/protected">Protected Page</Link></li>
        </ul>
        <Route path="/public" component={Public} />
        <Route path="/login" component={ Login } />
        <PrivateRoute path='/protected' component={ Protected } />
      </div>
    </Router>
  )
}

我的困难是理解传递给组件的参数以及它是如何在创建这个组件的函数中拆箱的，下面是函数：

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={(props) => (
    fakeAuth.isAuthenticated === true
      ? <Component {...props} />
      : <Redirect to={{
          pathname: '/login',
          state: { from: props.location }
        }} />
  )} />
)

那么这里的component: Component 到底是什么？是 ES-5 destructive assignment 吗？那么<Component {...props} />到底是什么？

Answer 1

{ component: Component, ...rest } 将属性 component 分配给变量 Component。您可以阅读有关解构分配的信息here。

在<PrivateRoute path='/protected' component={ Protected } /> 中，您将Protected 作为component 属性传递，然后Protected 在PrivateRoute 组件内被引用为Component 变量。 这只是为了您的方便。这是 JSX 要求的，以便区分标准 html 元素和用户定义的组件。

在<Component {...props} /> 中，{...props} 表示从props 对象中获取所有键值对并将它们传递给Component。查看this stackoverflow answer 以获得更好的说明。

其实就是下面这行

const PrivateRoute = ({ component: Component, ...rest }) => ();

意思

从传递给该组件的属性中获取component，将其存储为Component，并将所有其他属性保存在rest 变量中。

Answer 2

您首先将以下两个道具传递给PrivateRoute：path 和component。 函数头({ component: Component, ...rest })的意思是，你可以给它传递一个对象，它会寻找一个键为component的属性并将其存储为Component，其余的属性，如果有的话, 将被放入rest 对象中。在这种情况下，您的组件参数将是您传递的组件Protected，而rest 将包含path。

关于<Component {...props} />： 它是对象解构，这基本上意味着该对象中的key: value 对，在您的情况下为props，将在那里登记。

所以，用一个对象：

const myProps = {
    name: 'John',
    age: 21
}

并用作：

<MyComponent { ...myProps } />

这和你这样做是一样的：

<MyComponent name={myProps.name} age={myProps.age} />

Answer 3

{component: Component} 确实是解构赋值，在函数参数的上下文中也称为"argument unpacking"。

它只是在这个函数的范围内给道具component 一个新名称Component。 JSX 语法需要all user defined components to be capitalized。 （<component /> 不起作用。只有原生 dom 元素可以小写：<span /> 等）

虽然语法上允许在 prop 名称中使用任何大小写（因此您可以简单地使用 { Component } 代替，但 props 的约定是使用 camelCase，遵循 DOM 属性和变量名称的常规 javascript 约定。

所以你传入的 prop 叫做component，但在组件函数内部却是Component。