Question

我是React的新手。我现在正在研究React Router，看到许多人使用PrivateRoute组件来处理用户身份验证页面。但是，我对语法和对该功能的理解感到困惑。

export function PrivateRoute({ component: Component, authed, ...rest }) {
 return (
    <Route {...rest}
        render={
            (props) => authed ? <Component {...props} /> : <Redirect to={{ pathname: 'login', state: { from: props.location } }} />
        }
    />
 )
}

在下面这样使用

< PrivateRoute authed={this.props.isAuthenticated} path="/profile" component={MyProfile} />

我能知道为什么我们将所有参数包装在{}中吗？{{component：component，authed，... rest}？以及为什么我们这样使用“组件：组件”？是用于break component = {MyProfile}吗？但是为什么我们这样写？（道具）和...道具是什么？

... rest是path =“ / profile”以及其他类似“精确”的参数对吗？

非常感谢您！

Answer 1

我可以知道为什么我们将所有参数包装在{}中吗？{{component：component，authed，... rest}？

这是JavaScript语法，称为解构分配。这是从数组和对象中解包值的一种非常方便的方法。

想象一下，您的函数期望一个带有id键的对象。您写function(myObject) { return myObject.id; }。通过解构，您可以编写function({id}) { return id; }。并期望传递的对象将被分解为请求的键。

（道具）和...道具是什么？

首先，已知...是扩展运算符。这是将数组或对象扩展到需要参数或元素的地方的另一个方便快捷方式。

第二，(props)是箭头函数声明的一部分。注意，它后面跟随着一个箭头：(props) =>。这与编写function(props)相同。但是，箭头函数和function关键字之间存在一些细微的差异，主要是this关键字所指的含义。

还要注意，(props) =>之后是隐式返回。您可以使用显式的返回值编写这样的(props) => { return true;}箭头功能。或不带括号的隐式返回，例如：(props) => true。

Answer 2

我可以知道为什么我们将所有参数包装在{}中吗？{{component：component，authed，... rest}？

这是JavaScript语法，但是，以最初描述的方式编写React函数组件通常是开发人员的偏爱或编码风格指南的决定。让我们进一步细分您的问题。

component: Component：这是分解函数参数（component）并将其分配给新变量名（Component）的简写。请注意，我们这样做是因为React需要组件名称以大写字母开头。

...rest：这是我们如何处理传递给此函数的任意数量的其他参数（称为rest参数）的方式。可以这样想：“将所有剩余的函数自变量收集到一个值（rest中，我们以后可以在函数中使用它。在React中，将prop传递到组件树中很常见。

编辑：

reactpatterns.com有一些有用且简洁的示例。

参考文献：

对React PrivateRoute语法{}感到困惑

2 个答案: