gotohayato.com

月(ダークモード)
太陽(ライトモード)

React の PropTypes.element と PropTypes.elementType の違い

JavaScriptReact

JavaScript のフレームワーク React で使われる PropTypes.elementPropTypes.elementType の違いについてです。 両者には次の違いがあります。

意味
PropTypes.elementReact エレメント<MyButton />
PropTypes.elementTypeReact エレメントタイプMyButton

関係としては element がインスタンスで elementType がクラスという捉え方でよいようです。

尚、確認に使用した React と PropTypes のバージョンは次のとおりです。

  • react: 16.14.0
  • prop-types: 15.7.2

以下サンプルです。

PropTypes.element

次の MyComponentleftright というプロパティを受け取ります。 leftright はいずれも PropTypes.element です。

import React from "react"
import PropTypes from "prop-types"
const MyComponent = ({ left, right }) => {
return (
<div>
<div>{left}</div>
<div>{right}</div>
</div>
)
}
MyComponent.propTypes = {
left: PropTypes.element.isRequired,
right: PropTypes.element.isRequired,
}
const App = () => {
return (
<MyComponent
left={<img src="left.png" />}
right={<img src="right.png" />}
/>
)
}

PropTypes.elementType

次の MyComponentbutton というプロパティを受け取ります。 buttonPropTypes.elementType です。

import React from "react"
import PropTypes from "prop-types"
const MyComponent = ({ btn }) => {
return (
<btn>送信</btn>
)
}
MyComponent.propTypes = {
button: PropTypes.elementType.isRequired,
}
const MyButton = ({ children }) => (
<div><button>{children}</button></div>
)
const App = () => {
return (
<MyComponent btn={MyButton} />
)
}

ちなみに、特定のコンポーネントのインスタンスに制限したい場合は PropTypes.instanceOf() が使えるようです。

MyComponent.propTypes = {
button: PropTypes.instanceOf(MyButton),
}

参考


後藤隼人 (ごとうはやと)

ウェブ制作・開発やマーケティング、プロジェクト支援などをしています。

GitHubPython

お知らせ

大阪大学医学部附属病院 高度救命救急センターさんが現在クラウドファンディングのプロジェクトをされています(後藤も少しだけ寄附させていただきました)。
© 2021 gotohayato.com
サイトについてタグアーカイブメッセージを送る