reactjs - Hur man utökar React-komponentens prop-typning utan att ändra alla användningar av React.Component


Jag vill göra testID till en prop som är tillgänglig för alla React.Component-instanser för nativen testing. För närvarande lägger jag till det i prop-typen för alla komponenter som använder det. Finns det något sätt där jag till exempel kan definiera react/index.d.ts och överskriva Component-proptypen för att inkludera {testID?: string}?

REDIGERA :

// types/react/index.d.ts

import 'react'
import { Attributes, ClassAttributes } from 'react'

declare namespace react {
  interface IntrinsicAttributes extends Attributes {
    testID?: string
  }
  interface IntrinsicClassAttributes<T> extends ClassAttributes<T> {
    testID?: string
  }
}

Jag försökte ovanstående överskrivning, men det fungerar inte, men om jag kopierar hela React-typfilen och sedan gör ovanstående ändringar, fungerar det bra. Så jag behöver bara korrekt överskrivningsteknik. Kan någon snälla hjälpa mig med det?

Svar #1

// src/types/react/index.d.ts

import * as React from 'react'

declare global {
  namespace JSX {
    interface IntrinsicAttributes extends React.Attributes {
      testID?: string
    }

    interface IntrinsicClassAttributes<T> extends React.ClassAttributes<T> {
      testID?: string
    }
  }
}

Ovanstående åsidosättning fungerade för mig. Tack allihopa!

Svar #2

För klasskomponenter, skapa en proxyklass och utöka den eftersom även statiska egenskaper ärvs :

class Proxy extends React.Component {
  static propTypes = {
    testId: PropTypes.string
  };
}

class SomeComponent extends Proxy {
  render() {

  }
}

För funktionella komponenter kan du inte göra detta. Ett alternativ skulle vara att skapa ett verktyg som lägger till det åt dig :

function withPropTypes(Component) {
    Component.propTypes = {
        testId : PropTypes.string
    };

    return Component;
}


function SomeComponent() {

}

const SomeComponentWithPropTypes = withProps(SomeComponent);

Notera: Du kan använda ovanstående verktyg även för klasskomponenter.