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.
