[解決済み] ReactJsです。this.props.childrenのPropTypesはどうすればいいのでしょうか?
2022-03-15 20:28:09
質問
子コンポーネントをレンダリングする単純なコンポーネントがあるとする。
class ContainerComponent extends Component {
static propTypes = {
children: PropTypes.object.isRequired,
}
render() {
return (
<div>
{this.props.children}
</div>
);
}
}
export default ContainerComponent;
質問です。children propのpropTypeはどうすればいいのでしょうか?
オブジェクトとして設定すると、コンポーネントを複数の子で使用するときに失敗します。
<ContainerComponent>
<div>1</div>
<div>2</div>
</ContainerComponent>
警告 プロップタイプに失敗しました。無効なプロップ
children
タイプのarray
に供給される。ContainerComponent
期待されるobject
.
配列として設定した場合、子要素を1つだけ与えると失敗します、つまり。
<ContainerComponent>
<div>1</div>
</ContainerComponent>
警告 プロップタイプに失敗しました。無効なプロップチルドレンのタイプはオブジェクトです。 コンテナコンポーネントに供給された配列です。
アドバイスお願いします。わざわざ子要素のpropTypesチェックをしないほうがいいのでしょうか?
どのように解決するのですか?
以下のような活用を試してみてください。
oneOfType
または
PropTypes.node
import PropTypes from 'prop-types'
...
static propTypes = {
children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node),
PropTypes.node
]).isRequired
}
または
static propTypes = {
children: PropTypes.node.isRequired,
}
関連
-
[解決済み】React - 式は1つの親要素を持つ必要がありますか?
-
[解決済み] エラー: 未定義のプロパティ 'map' を読み取ることができません。
-
[解決済み】Typescript react - モジュール ''react-materialize'' の宣言ファイルが見つかりませんでした。'path/to/module-name.js' は暗黙のうちに any 型を持ちます。
-
[解決済み】Reactでclsxを使用する方法
-
[解決済み] ReactJS: Warning: setState(...): 既存の状態遷移の間に更新することはできません
-
[解決済み] react router dom v4でwebpack dev serverを構成する方法は?
-
[解決済み] ReactJS で inst.render が関数でないエラーが発生する
-
[解決済み] プロップ `history` は `Router` で必須とマークされているが、その値は `undefined` である。
-
[解決済み] AxiosにCORSの問題が発生
-
[解決済み】ReactのPropTypes。1つのプロップに対して異なるタイプのPropTypesを許可する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】<Router>の外側で<Link>を使用してはならない
-
[解決済み】React 17で動作するEnzymeアダプターはどれですか?
-
[解決済み】ReactJS: マテリアルuiのブレークポイントについて
-
[解決済み】ngrokがReact devサーバーに接続しようとすると、無効なホストヘッダが表示される。
-
[解決済み】React Propsが定義されていません。
-
[解決済み] sh: react-scripts: npm start の実行後にコマンドが見つからない。
-
[解決済み] 非必須項目に対するYupバリデーション
-
[解決済み] ReactJs "インバリアント違反..." リアクトの古典的な問題
-
[解決済み] Cross-envでyarnの実行時にenv変数が変更されない。
-
[解決済み] reactのuseStateフックでコールバックを使う方法 [重複]。