如何在组件 Reactjs 中传递道具

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 is undefined.

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

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
    ];

我需要在Step组件中传递任何东西吗，请帮我解决这个问题。我是 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 可以是任何键，并且由于 ? 所有键的值可以是 undefined.

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

如何在组件 Reactjs 中传递道具

How to pass props in a component Reactjs

javascript

typescript

reactjs

react-props