reactjs - 将 const 转换为反应类

Question

如何将此代码更改为类：

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

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

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

但我需要更改为一个类，因为我使用的是 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

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

@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 }
                }}/>
            )
        )}/>
    )
  }
}