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在Component组件内被引用为PrivateRoute变量。 ~~这只是为了您的方便。~~ 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 }，但是prop的约定是使用camelCase，遵循DOM属性和变量名的常规javascript约定。

因此，您传入的prop被称为component，但是在组件函数中，它是Component。

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

3 个答案: