将 const 转换为反应 class

Question

如何将此代码更改为 class:

const PrivateRoute = ({ component, ...rest }) => (
  <Route {...rest} render={props => (
    fakeAuth.isAuthenticated ? (
      React.createElement(component, props)
    ) : (
      <Redirect to={{
        pathname: '/login',
        state: { from: props.location }
      }}/>
    )
  )}/>
)

我在 React 路由器 4 中使用这个组件：

<Switch>
              <Route exact path="/" component={About} />
              <Route exact path="/login" component={Login} />
              <PrivateRoute path="/protected" component={Home}/>
              <Route component={NotMatch} />
</Switch>

但我需要更改为 Class 因为我正在使用 MobX。

像这样：

@inject('store')
@observer
export default class PrivateRoute extends Component {
  constructor (props) {
    super(props)
    this.store = this.props.store

  }

  render () {
    return (
            <div>

            </div>
      )
  }
}

谢谢！

Answer 1

您的 class 代码可以处理像您的功能组件这样的道具：

@inject('store')
@observer
export default class PrivateRoute extends Component {
  constructor (props) {
    super(props);
    this.store = this.props.store;
  }

  render () {
    const { component, ...rest } = this.props;
    return (
        <Route {...rest} render={ props => (
            fakeAuth.isAuthenticated ? (
                React.createElement(component, props)
            ) : (
                <Redirect to={{
                    pathname: '/login',
                    state: { from: props.location }
                }}/>
            )
        )}/>
    )
  }
}

将 const 转换为反应 class

Convert const to react class

reactjs

react-router

mobx

mobx-react