Добавить свойство в StatelessComponent

Question

Как добавить свойства к компонентам без сохранения состояния?

Например, 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}/>

При этом я не могу найти это ни в реквизите, ни в покое, ни в компоненте.

Answer 1

Это ошибка Typescript, а не реакция. Предполагая, что 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 полностью пропустить эту проверку, но может быть и такой.