Question

我正在使用react-router，我创建了一个PrivateRoute组件，如果经过身份验证，则会显示该组件，否则会重定向到登录页面。

我想要做的是在调用者指定的基础上传递额外的prop（身份验证）。

我似乎无法正确使用语法，并且谷歌搜索“......道具”没有提出任何文档。

这是我的代码：

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

Answer 1

问题在于authentication prop语法。使用=代替:

<Component authentication={this.state.authentication} {...props}/>

Answer 2

这就像其他任何一个道具一样：

<Component
  authentication={this.state.authentication}
  {...props}
/>

我发现将它们放在不同的行上很容易看出发生了什么。

此外，如果{...props}已经包含名为authentication的密钥，那么您可以通过将其置于以下位置来覆盖它：

const someProps = {
  hello: 1
};

// this.props.hello will be 2
<Component
  {...someProps}
  hello={2}
/>

如何在反应中添加另一个道具......道具

2 个答案: