Блог

Есть ли способ разрешить динамические data-* атрибуты в приведенном ниже компоненте React с помощью Typescript? Я хотел бы иметь возможность:

1. Поддержка className , style и других распространенных атрибутов HTML
2. Разрешить data-* атрибуты
3. Разрешить пользовательские реквизиты компонента, такие как custom

 interface ITestProps {
  custom?: string;
}
export const Test: React.FunctionComponent<
  ITestProps amp; HTMLAttributes<HTMLDivElement>
> = ({ children, className, custom, ...rest }) => (
  <div className={className} {...rest}>
    {children} {custom}
  </div>
);
  

Использование:

 <Test data-some-random-text="Hello World">test</Test>
  

Не так, как вы думаете, нет. Но вы можете заставить это работать, даже если вы не получаете полезных подсказок по типу. Просто отключите некоторые или все (как я сделал) проверки типов для вашего компонента и просто работайте с реквизитами напрямую:

 export const Test: React.FunctionComponent<any> = (props: any) => {
    let rest: any = {};
    for (let property in props) {
        if (property.indexOf("data-") === 0) {
            rest[property] = props[property];
        }
    }

    return (
        <div className={props.className} {...rest}>
            {props.children} {props.custom}
        </div>
    );
};
  

Мои два цента в том, что вы не должны этого делать и либо предопределять все свои свойства, либо передавать один объект со всеми вашими данными -.

Начиная с TS 4.1, вы можете сделать это следующим образом

 type TestProps = { 
  custom?: string; 
} amp; {
  [key: `data-${string}`]: unknown;
}