解构后如何设置函数的道具类型？

Question

我在设置道具类型时遇到问题。

export default function PrivateRoute({component: Component, ...rest}) {
  const {currentUser} = useAuth();

      return (
        <Route
          {...rest}
          render={(props) => {
            return currentUser ? <Component {...props} /> : <Redirect to="/" />;
          }}
        ></Route>
      );
    }

我做了一个简单的Private Route，在组件中重命名为Component，大写C。但是我还想将这个组件的类型设置为React Component，请问如何实现？谢谢

Answer 1

您提供要解构的对象的类型。例如，如果 Component 是 FunctionComponent<PropsType> | ComponentClass<PropsType>，则整个对象可能是 {component: FunctionComponent<PropsType> | ComponentClass<PropsType>}:

export default function PrivateRoute<PropsType extends object>(
    {component: Component, ...rest}: {component: FunctionComponent<PropsType> | ComponentClass<PropsType>}
//  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
//  destructuring                    type of object
) {
    const {currentUser} = useAuth();
    return (
        <Route
            {...rest}
            render={(props: PropsType) => {
// Note −−−−−−−−−−−−−−−−−−^^^^^^^^^^^
                return currentUser
                    ? <Component {...props} />
                    : <Redirect to="/" />;
            }}
        ></Route>
    );
}

我在这里使用了类型参数 (PropsType)，但如果您有具体的类型，您可以改用它。

解构后如何设置函数的道具类型？

How to set a type of a function's prop after destructuring?

typescript

reactjs

react-typescript