时间戳

首页 > 解决方案 > 向 StatelessComponent 添加属性

reactjs - 向 StatelessComponent 添加属性

问题描述

如何为无状态组件添加属性？

例如，PrivateRoute 是一个无状态组件，用于在用户未通过身份验证时禁止导航到某些路由。路由通过路由器访问：

import { BrowserRouter as Router, Link, Route, Redirect } from 'react-router-dom';
...
            <Router basename={baseUrl} >
            <div>
                <ul>
                    <li><Link to='/public'>Public</Link></li>
                    <li><Link to='/protected'>Protected</Link></li>
                </ul>

                <PrivateRoute path='/protected' component={Protected} auth={true}/>
            </div>
        </Router>

我的目标是通过 auth={true} （这最终将成为基于登录页面更新的标志），但是，我收到以下错误：

Severity    Code    Description Project File    Line    Suppression State
Error   TS2339  (TS) Property 'auth' does not exist on type 'IntrinsicAttributes & RouteProps & { children?: ReactNode; }'.

PrivateRoute 定义如下：

import * as React from "react"
import { Redirect, Route, RouteComponentProps, RouteProps } from "react-router-dom"

type RouteComponent = React.StatelessComponent<RouteComponentProps<{}>> | React.ComponentClass<any>
const AUTHENTICATED = true;
export const PrivateRoute: React.StatelessComponent<RouteProps> = ({ component,  ...rest }: any) => {
    const renderFn = (Component?: RouteComponent) => (props: RouteProps) => {
        if (!Component) { return null }
        console.log(props)
        if (AUTHENTICATED) { return <Component {...props} /> }

        const redirectProps = {
            to: {
                pathname: "/login",
                state: { from: props.location },
            },
        }

        return <Redirect {...redirectProps} />
    }

    return <Route {...rest} render={renderFn(component)} />
}

我努力了：

export const PrivateRoute: React.StatelessComponent<RouteProps> = ({ component, auth,  ...rest }: any) => {
    const renderFn = (Component?: RouteComponent) => (props: RouteProps) => {

也

export const PrivateRoute: React.StatelessComponent<RouteProps> = ({ component,  ...rest }: any, auth: boolean) => {
    const renderFn = (Component?: RouteComponent) => (props: RouteProps) => {

和

export const PrivateRoute: React.StatelessComponent<RouteProps> = ({ component,  ...rest }: any) => {
    const renderFn = (Component?: RouteComponent, auth: boolean) => (props: RouteProps) => {

最后，我尝试通过变量发送值：

let authenticated = false
<PrivateRoute path='/protected' component={Protected} {...authenticated}/>

这样做时，我无法在 props、rest 或 Component 中找到它。

标签： reactjstypescriptreact-router

解决方案

这是一个打字稿错误，而不是反应错误。假设这auth是您的自定义属性，您需要执行以下操作才能使其正常工作：

interface PrivateRouteProps extends RouteProps {
  auth?: boolean;
}
export const PrivateRoute: React.StatelessComponent<PrivateRouteProps> = ({component, auth, ...rest})

做事SFC<RouteProps & { auth?: boolean }>也应该奏效。关键是你不能在 React TSX 中添加道具而不声明props是any或声明附加道具的类型。我不相信有办法完全tsconfig.json跳过这张支票，但可能有办法。

推荐阅读