Question

我正在尝试将此类转换为功能组件，但没有运气。谁能给我方向？

        import { Redirect, Route, RouteProps } from 'react-router'


        function mapStateToProps (state: AppState, ownProps: RouteProps): MappedProps {
          const user = state.auth.user
          return {
            External: user ? user.External : true,
          }
        }

        type InnerRouteProps = RouteProps & MappedProps

        class MyInnerRoute extends React.Component<InnerRouteProps> {
          render () {
            const {
              props: { External, component, render, children, ...rest },
            } = this

            return (
              <Route
                {...rest}
                render={props => {
                  if (External) {
                    return <Redirect to={'/'} />
                  }
                  if (component) {
                    const Component = component
                    return <Component {...props} />
                  }
                  if (render) {
                    return render(props)
                  }
                  return children
                }}
              />
            )
          }
        }

        export default connect(mapStateToProps)(MyInnerRoute)

它应该看起来像这样。不知道const道具会在这里。

        const  MyInnerRoute = ()  =>  {
          
          return (
            <Route
              {...rest}
              render={props => {
                if (External) {
                  return <Redirect to={'/'} />
                }
                if (component) {
                  const Component = component
                  return <Component {...props} />
                }
                if (render) {
                  return render(props)
                }
                return children
              }}
            />
          )
          
        }

        export default MyInnerRoute

Answer 1

您的道具将通过功能参数进入，就像这样：

const MyInnerRoute = (props: InnerRouteProps) => {...

然后您可以像以前在课堂上一样使用它们。

const { External, component, render, children, ...rest } = props

Answer 2

这应该可以完成工作。

const  MyInnerRoute = ({ External, component, render, children, ...rest })  =>  {
          
          return (
            <Route
              {...rest}
              render={props => {
                if (External) {
                  return <Redirect to={'/'} />
                }
                if (component) {
                  const Component = component
                  return <Component {...props} />
                }
                if (render) {
                  return render(props)
                }
                return children
              }}
            />
          )
          
        }

        export default MyInnerRoute

将类转换为功能组件

2 个答案: