Защита от экземпляров React

Я буду краток. Использование Typescript 2.7.2 и "" @ types / react ":" ^ 16.0.40 ","

Наличие действительно серьезных проблем с попыткой защиты от экземпляров React Component.

рассмотреть компонент

IFooProps {
     element: SomeType
}
...component<IFooProps> {
  ....
  render() {
      return (
          react.cloneElement(element, {onClick: this.myOnClickHandler});
      )
  }
}

Если element является экземпляром реагирующего компонента, onClick будет применен к экземпляру и никогда не будет запускаться. Однако, если это допустимый тип элемента I.E div, input, span и т. д., OnClick будет клонирован в элемент и работать нормально.

какой тип мне заменить SomeType, чтобы разрешить использование элементов JSX, таких как div, span, input и т. д., но не экземпляров Component.

<Foo element = {<Bar/>} should fail typecheck
<Foo element{<div/>} should pass typecheck

iv'e пробовал ReactNode, ReactElement, ReactHTML, JSX.Element и т. д. и т. д. и т. д., похоже, ничего не проверяет тип.

Я думаю, что это пока невозможно. Я мог бы быть в машинописи 2.8. См. github.com/Microsoft/TypeScript/issues/21699

paibamboo 15.03.2018 05:23

На самом деле 2.8 был выпущен на Github вчера, не должно быть слишком долго, пока 2.8 не будет выпущен на npm.

paibamboo 15.03.2018 05:30

@paibamboo, спасибо, какой тип в машинописном тексте 2.8 вы бы использовали для этого? я не мог видеть это в документации.

Shanon Jackson 15.03.2018 21:09

Точно сказать не могу. Я надеюсь, что это будет React.ReactElement<IProps> (который доступен, но сейчас не работает должным образом). Но они просто снова открыли проблему и изменили веху на 2,9. :(

paibamboo 16.03.2018 04:47
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
4
59
0

Другие вопросы по теме