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

Question

我有以下反应成分：

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是破坏性分配吗？那么到底<Component {...props} />到底是什么呢？

Answer 1

您首先将以下两个道具传递给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 2

{component: Component}确实在破坏赋值，在函数参数的上下文中也称为“理解力”。

它只是在这个函数的作用域中给支柱component一个新的名称Component。JSX语法需要所有要大写的用户定义组件。(<component />不起作用。只有本机dom元素才能被小写：<span />等)

虽然语法上允许在道具名称中使用任何情况(因此您只需使用{ Component }，道具的约定是使用camelCase，DOM属性和变量名遵循正常的javascript约定)。

所以您传入的道具名为component，但是在组件函数中，它是Component。