¿Cuál es la forma correcta de escribir y usar la propiedad className en un componente personalizado? Solía ser capaz de hacer esto:
class MyComponent extends React.Component<MyProps, {}> { ... }y luego usar mi componente a través de:
<MyComponent className="my-class" /> Tenga en cuenta que no definiría className en MyProps , aunque React se escribió previamente para admitir este uso.
Ahora, ahora estoy viendo este tipo de error:
Property 'className' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<{}, ComponentState>> & Readonly<{ childr...' ¿Cuál es la forma correcta de definir/escribir mi componente que me permitirá usar className cuando use mi componente?
Puede utilizar el tipo HTMLAttributes , por ejemplo:
class MyComponent extends React.Component<MyProps & React.HTMLAttributes<HTMLDivElement>, {}> { render() { return <div className={ this.props.className }>My Div</div> } }De esa manera, puede pasar cualquiera de las propiedades que podría necesitar un elemento html.
Si solo necesita la propiedad className , puede hacer esto:
class MyComponent extends React.Component<MyProps & { className: string }, {}> { render() { return <div className={ this.props.className }>My Div</div> } } O simplemente agréguelo a su tipo MyProps .
Para alguien que busca una solución para componentes funcionales, como yo.
type Props = { className?: string } const MyComponent: React.FC<Props> = (props) => ( <div className={props.className}>{props.children}</div> ) export default MyComponento si desea declarar la interfaz por separado:
interface OnlyClassNameInterface extends React.FC<{className: string}> {} const MyComponent: OnlyClassNameInterface = (props) => ( <div className={props.className}>{props.children}</div> ) export default MyComponenty puedes mover la interfaz a otro archivo
import React from 'react' type MixProps<P> = P & {className?: string} export interface OnlyClassNameInterface<P = {}> extends React.FC<MixProps<P> {}agregue un react-native-class-name.polyfill.d.ts
import 'react-native'; // polyfill className prop for react-native Components declare module 'react-native' { interface TextProps { className?: string; } interface PressableProps { className?: string; } interface TextInputProps { className?: string; } interface ViewProps { className?: string; } interface InputAccessoryViewProps { className?: string; } interface ImagePropsBase { className?: string; } interface TouchableWithoutFeedbackProps { className?: string; } // others StyleProp<?> in node_modules/@types/react-native extends up show, should not define again. }