标签: higher-order-components

我有一个问题,以防止未经授权的用户访问授权的路由/组件 - 例如登录用户仪表板

我有以下代码:

import React from 'react'
//other imports
import {withRouter} from 'react-router'

class User extends React.Component {
  constructor(props) {
    super(props)
    console.log('props', props)
    let user = JSON.parse(localStorage.getItem('userDetails'))
    if(!user || !user.user || props.match.params.steamId !== user.user.steamId) {
      props.history.push('/')
    } else {
      this.props.updateUserState(user)
      this.props.getUser(user.user.steamId)
    }
  }

  //render function
}

//mapStateToProps and mapDispatchToProps

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(User))

路由器:

render() {
    return (
      <Router>
        <div>
          <Route exact path="/" component={Main}/>
          <Route path="/user/:steamId" component={User}/>
          <Route path="/completelogin" component={CompleteLogin}/>
        </div>
      </Router>
    )
  }

我尝试记录以检查是否输入了条件,但是我从渲染函数中得到一个错误,说它无法读取null的属性.

有没有办法解决我的问题,也有更好的方法来满足我的要求？只有授权用户才能严格访问特定组件

我只是用重新合成进行了HOC，但由于某种原因，所有传递下来的道具都触发了反应警告。

Warning: Unknown event handler property `onSaveChanges`. It will be ignored.

我所有的属性都具有相同的语法（以小写开头，然后是大写：lowerUpper）。当然，如果我将它全部写成小写，那么它不会触发任何警告，但是如果我将HOC与recompose一起使用，我应该将所有道具都写成小写吗？

我的HOC：

import React from 'react'

import { withStateHandlers, withHandlers, withState, compose } from 'recompose'

const editableCell = (defaults) => 
    compose(
        withStateHandlers(
            { isEditing: false, value: ''},
            {
                toggleEditing: ({ isEditing, inputValue }) => defaultValue => ({
                    isEditing: true,
                    inputValue: isEditing ? inputValue : defaultValue
                }),
                onChange: () => event => ({
                    inputValue: event.target.value
                }),
                deactiveCell: () => () => ({
                    isEditing: false
                })
            }
        ),
        withHandlers({
            handleSave: ({ …

我试图弄清楚我是否正确输入了我的反应高阶组件。在大多数情况下，这是正常工作的，但是在将 React 引用应用于 HOC 的实例时，我遇到了打字问题。下面是一个简化的再现：

import * as React from "react";

// Is returning a React.ComponentClass correct here?
function HOC(): (Component: React.ComponentType) => React.ComponentClass {
    return function(Component: React.ComponentType): React.ComponentClass {
        return class Bar extends React.Component {}
    }
}

class Foo extends React.Component<{},{}> {}
const Bar = HOC()(Foo);

class Test extends React.Component {
    private ref: React.RefObject<typeof Bar> = React.createRef<typeof Bar>();

    render(): any {
        return (
            <React.Fragment>
              <Bar
                ref={this.ref} // error here
              />
            </React.Fragment>
        );
    }
}

我也在这里捕获了这个问题：https : //stackblitz.com/edit/react-ts-rtmfwr

我得到的错误是： …

通过 HOC 传递组件会导致 typescript 编译器丢失 defaultProps 信息。例如

themed.tsx

export interface ThemedProps {
    theme: {};
}

type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
export type Subtract<T extends K, K> = Omit<T, keyof K>;

const themed = <P extends ThemedProps = ThemedProps>(
    ComponentToWrap: React.ComponentType<P>
) => {
    return class ThemeWrappedComponent extends React.Component<
         Subtract<P, ThemedProps>
    > {
        static displayName = `themed(${ComponentToWrap.displayName})`;

        theme = () => {
            return {}
        };

        render() {
            return (
                <ComponentToWrap
                    {...this.props as P}
                    theme={this.theme()}
                /> …