web-dev-qa-db-ja.com

React PropTypes DOM要素？

プロパティをDOM要素である必要があるとマークするにはどうすればよいですか？

このページ はPropTypes.elementは実際にはReact要素なので、[〜＃〜] dom [〜＃〜に相当するものは何ですか]要素？

reactjsreact-proptypes
22
mpen
PropTypes.instanceOf(Element)

私のために働いています。 isRequiredを追加することもできます。

PropTypes.instanceOf(Element).isRequired
23
Gregory Bolkenstijn

渡されたプロパティがElementのインスタンスであるかどうかを確認できます。

Elementインターフェイスは、ドキュメントのオブジェクトを表します。このインターフェイスは、あらゆる種類の要素に共通のメソッドとプロパティを記述します。特定の動作は、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>
7
Hardy

リストコンポーネントの例：

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

私のために働く。

6
rvantonisse