时间戳

首页 > 解决方案 > 如何使用反应和打字稿访问反应功能组件中的道具？

reactjs - 如何使用反应和打字稿访问反应功能组件中的道具？

问题描述

我有一个 MainComponent 和 ChildComponent 并将 isOpen 道具从 MainComponent 传递给 ChildComponent。

下面是代码，

function MainComponent () {
   return (
       <Route
        path="items"
        render={routeProps => (
          <Layout>
              <ChildComponent
                  isOpen={isOpen}// passing prop here
                {...routeProps}
              />
          </Layout>
        )}
      />
  )

}

type Props = RouteComponentProps<{ first: string, second: string }>;

function SchedulePage({ match }: Props) { //how can i access it here
    const { first } = match.params;
}

我已经尝试过类似下面的东西

type Props = RouteComponentProps<{ first: string; second: string, isOpen: boolean }>;

function ChildComponent({ isOpen, match }: Props) {
    const { first } = match.params;
}

但这似乎并不正确。有想法该怎么解决这个吗。谢谢。

标签： reactjstypescript

解决方案

您必须扩展 RouteComponentProps 以将其他道具传递给组件。RouteComponentProps只会采用参数、静态上下文和位置状态的类型参数。

这是你如何做到的。

interface IParams {
   first: string;
   second: string;
}

interface Props extends RouteComponentProps<IParams> {
   isOpen: boolean;
}

function SchedulePage({ match, isOpen }: Props) { // this is how you access your props
    const { first, second } = match.params;
}

如果你想使用React.FC泛型，这是如何做到的。

const SchedulePage: React.FC<Props> = ({ match, isOpen }) => {
  const { first, second } = match.params;
};

让我知道它是否有帮助或您是否遇到任何错误。

推荐阅读