Question

我的组件：

interface Props extends RouteComponentProps<any> {
      sample: {
        info: SampleInfo;
      };
    }
    export class Step extends Component<Props, State>{
    render() {
        const { title } = this.props.sample.info;
        return (
           <TextContent >
              <Title headingLevel="h1" size="3xl">
               Uploading and validating your swagger : {name}  // name is available under sample.info 
              </Title>
            </TextContent>
    )}
    }

当我尝试访问道具时，我得到了this.props.sample是未定义的。

我试图在向导中调用此步骤组件：

const steps = [
      {
        id: 1,
        name: "show",
        component: <Form />,
      },
      {
        id: 2,
        name: "Listing",
        component: <Sample2 />,
      },

      { name: "Save", component: <Step/>}, // I am calling my Step component from here
    ];

我是否需要在“步骤”组件中传递任何内容，请为此提供帮助。我是ReactJS的新手

Answer 1

您的<Step/>组件实际上必须具有props。

它必须通过类似<Step sample={{ info: { title: 'whatever' } }}/>的东西，然后它才能起作用。

Answer 2

来自RouteComponentProps的

react-router被定义为：

export interface RouteComponentProps<
    Params extends { [K in keyof Params]?: string } = {},
    C extends StaticContext = StaticContext,
    S = H.LocationState
> {
    history: H.History<S>;
    location: H.Location<S>;
    match: match<Params>;
    staticContext?: C;
}

（来源：https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react-router/index.d.ts#L70）

由于extends { [K in keyof Params]?: string }，您需要指定 Params与any通用（通过RouteComponentProps<any>），K可以是任何键，由于?，所有键的值都可以是{{1} }。

我不使用undefined，但我认为您必须使用通用参数的适当值来指定react-router。

如何在组件Reactjs中传递道具

2 个答案: