Реагировать на элемент DOM PropTypes?

Как пометить свойство как элемент DOM?

На этой странице говорится, что PropTypes.element на самом деле является React, так что же эквивалентно элементу DOM?


reactjs react-proptypes
person mpen    schedule 08.09.2016    source источник
comment
Вы имеете в виду тип элемента DOM? Проверку определенного типа можно выполнить с помощью специального средства проверки свойств против someNode.constructor.name.   -  person Matthew Herbst    schedule 09.09.2016
comment
@MatthewHerbst Нет, я имею в виду любой элемент DOM. div, span, input, что угодно.   -  person mpen    schedule 09.09.2016
comment
div, span, input также являются реагирующими элементами. Они транслируются в элементы DOM только позже.   -  person vijayst    schedule 09.09.2016
comment
@vijayst Даже если они получены с помощью document.getElementById или созданы с помощью document.createElement и не React.createElement("input")?   -  person mpen    schedule 09.09.2016
comment
@elmeister node слишком свободный. Он включает в себя числа, строки и массивы.   -  person mpen    schedule 09.09.2016
comment
React.PropTypes.node регистрирует предупреждение Failed prop type: Invalid prop   -  person Alessander França    schedule 23.11.2016

Ответы (3)


arrow_upward
40
arrow_downward 

PropTypes.instanceOf(Element)

Работает на меня. Вы также можете добавить isRequired:

PropTypes.instanceOf(Element).isRequired
person Gregory Bolkenstijn    schedule 21.06.2018
comment
Есть ли эквивалент nodejs? - person Greg; 15.08.2019
comment
Теперь вы можете использовать PropTypes.elementType, как описано здесь: title="какой правильный тип реквизита для ссылки в реакции"> stackoverflow.com/questions/48007326/ - person Pandaiolo; 06.09.2019
comment
Расширение этого ответа, чтобы включить разницу между тем, как это сделать с div и импортированным компонентом, может дать вам дополнительную репутацию, просто сказав - person Erik Grosskurth; 21.02.2020
comment
Вам следует избегать использования этого, если вы используете SSR для своего приложения, потому что Element будет undefined в nodejs. Если вы удалите свои PropTypes из своей производственной сборки, у вас все будет хорошо. Но даже так вы выдаете ошибку в девелоперской сборке. - person Carl von Buelow; 13.06.2020

arrow_upward
7
arrow_downward

Вы можете проверить, является ли переданное свойство экземпляром Element:

Интерфейс Element представляет собой объект Document. Этот интерфейс описывает методы и свойства, общие для всех типов элементов. Конкретные поведения описаны в интерфейсах, которые наследуются от Element, но добавляют дополнительные функции. Например, интерфейс HTMLElement является базовым интерфейсом для элементов HTML, а интерфейс SVGElement — основой для всех элементов SVG.

class Some extends React.Component {
  render() {
    return (
      <div> Hello </div>
    );
  }
}

const validateDOMElem = (props, propName, componentName) => {
  if (props[propName] instanceof Element === false) {
    return new Error(
      'Invalid prop `' + propName + '` supplied to' +
      ' `' + componentName + '`. Validation failed.'
    );
  }
}

Some.propTypes = {
  htmlElem: validateDOMElem,
};

const para = document.getElementById('para');

ReactDOM.render(<Some htmlElem={para} />, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>

<div id="app"></div>
<p id="para"></p>

person Hardy    schedule 09.09.2016
comment
Также можно не создавать кастомный валидатор и использовать PropTypes.instanceOf(Element) - person Michael Radionov; 21.03.2017

arrow_upward
6
arrow_downward

Например, с компонентом списка:

MyList.propTypes = {
  children: PropTypes.instanceOf(<li></li>),
}

Работает на меня.

person rvantonisse    schedule 25.04.2017
comment
Я получаю предупреждение Failed prop type: Right-hand side of 'instanceof' is not callable, если я использую это, это больше не работает в 2019 году? - person micnil; 07.09.2019