react

Главная идея

Основные мысли:

Если в вашем случае ошибка возникается в JSX разметке вида:

return (
    <TextInput
    label={label}
    value={value} // код посвечивается как недостижимый!
    formatInputValue={formatInputValue}
    onChange={onChange}
  />  
);

-то, возможно, причина просто в том, что у расширение файла .ts а не .tsx и поэтому он анализируется под другим правилам

Решение для JSX

Исправить расширение файла на .tsx

TypeError: Cannot assign to read only property
can't define property "....": "..." is not extensible

-- одной из причин таких ошибок (напр. если вы просто используете какие-то объекты в useRef()) может быть то, что кто-то выполняем object.freeze() для этой сущности,
этим кем-то может быть Redux (если ваши сущности не только хранятся в реф, но и отправляются в стейт редакса), если объект попадает туда по ссылке, используйте декомозицию сущности:

{...yourObject}

-- чтобы получить незамороженную версию

Нужно выставить переменную среды PORT, например, в package.json вместо:

 "scripts": {
    "start": "react-scripts start",

Написать:

 "scripts": {
    "start": "PORT=3006 react-scripts start",

Ситуация

У нас есть блок, котором работает JS не зависимый от реакта (напр. карта), мы хотим отредндерить какой-то компонент в HTML, чтобы потом показать его во всплывающей подсказке на карте

В коде это может выглядеть как-то так:

Далее приводится код, который позволяет отследить изменения размеров html dom элемента, не только когда изменяется размер окна браузера, но и когда изменяются размеры других элементов на странице (а наш отслеживаемый элемент растягивается или сжимается из-за этого).

Код написан для для отслеживания ширины элемента, но можно получить и другие значения с помощью ResizeObserver.

Импортируем, как будет значение было экспортировано по умолчанию и затем применяем:

Пример на typescript (для чистого js смысл такой же, только без типов):

Код:

Если у вас уже есть компонент инпута и вам нужно просто выводить некоторое значение с перемененной маской, то воспользуйтесь пакетом imask https://www.npmjs.com/package/imask