Реакция с Typescript: свойство «имя» не существует для типа «DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>»
Я начал использовать React с Typescript и пытаюсь добавить свойство «name» в «div», но Typescript жалуется на это и не позволяет мне добавить его, потому что этого свойства не существует.
Это полное сообщение, которое я получаю:
Type '{ children: Element[]; name: string; className: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
Property 'name' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.ts(2322)
Как я могу это решить? Вот пример файла .tsx:
import React from "react";
export default function TestComponent() {
return <div name="component-name">Test</div>;
}
Я использую реактивную прокрутку библиотеки, для которой требуется свойство имени в компоненте.
Чтобы скопировать из МДН, name действителен только для: <button>, <form>, <fieldset>, <iframe>, <input>, <keygen>, <object>, <output>, <select>, <textarea>, <map>, <meta>, <param>
Я использую реактивную прокрутку библиотеки, для которой требуется свойство имени в компоненте.
Ответы 2
Ошибка верна, HTMLDivElement не имеет свойства name, а name является недопустимым атрибутом для div элементы.
Если вы хотите поместить в элемент нестандартную, невидимую информацию, используйте data-* атрибут:
<div data-name="component-name">Test</div>
... и если вам нужно получить его значение из элемента DOM (например, через ссылку), используйте getAttribute или dataset.
I'm using the library react-scroll that requires a name property on the component.
Вы неправильно прочитали документацию.
Вот цитата из него:
var Scroll = require('react-scroll'); var Element = Scroll.Element; var scroller = Scroll.scroller; <Element name="myScrollToElement"></Element>
Для этого требуется реквизит name для компонента Element (который предоставляется библиотекой), нет для div.
Ну вот, между нами мы ответили на X и Y. ;-) Но твой вариант более полезен. Хороший!
Удалите
name="component-name"из исходного кода. ??♂️ (Это похоже на XY-проблема. Вы пытаетесь решить загадочная проблема, добавляя недопустимый атрибут имени в div, но мы не можем сказать вам, как вы должны решать эту проблему, потому что вы держите ее в тайне и вместо этого сосредоточившись на попытке взломать атрибутnameтам, где ему не место).