如何在react类上定义函数的TypeScript接口?

时间:2017-12-14 09:21:38

标签: reactjs typescript

我想在MessageDialog中的this.SectionList上保存对SectionList的引用。我试图定义接口以允许第31行上的SectionList,但这没有任何效果。我该怎么办?

TypeScript抱怨说: MessageDialog.tsx(132,38): error TS2339: Property 'SectionList' does not exist on type 'SkademeldingDialog'

 29 interface IComponentProps {
 30   navigation: NavigationScreenProp<any, any>;
 31   SectionList: any; // I tried to add SectionList here, but that did not work.
 32 }
 33
 34 interface IDispatchToProps {
 35   requestHendelsesvelger: RequestHendelsesvelgerInterface;
 36   requestProsessguide: RequestProsessguideInterface;
 37 }
 38
 39 type Props = IComponentProps & IDispatchToProps;

121 class MessageDialog extends React.Component<Props> {

128   public render() {
129
130     return (
131       <SectionList
132         ref={(sectionlist) => { this.SectionList = sectionlist; }}
137       >
138       </SectionList>

1 个答案:

答案 0 :(得分:1)

Props类型是在组件中键入this.props而不是组件实例本身,您不应在其中添加SectionList。它应该是类的属性,它将存在于MessageDialog类型:

class MessageDialog extends React.Component<Props> {
  private sectionList: SectionList;
  public render() {

    return (
      <SectionList
        ref={(sectionlist) => { this.sectionList = sectionlist; }}
      >
      </SectionList>