未定義の小道具のベストプラクティス

Question

は、私たちはこのよう

<Child text="foo" action={this.bar} /> 

ここ

textとactionにレンダリングされているChildコンポーネントがあると仮定しよう子コンポーネントに与えられた2つの小道具です。

しかし、場合

は Childコンポーネントは、その種の undefined小道具例外 this.props.text is undefinedか何かを引き上げる

<Child /> 

Child部品に供給なし小道具がない場合。

Childコンポーネントを提供する小道具がない場合でも、それをレンダリングするベストプラクティスは何ですか？

Childコンポーネントで常にチェックする必要がありますか。

if (this.props.text !== undefined) && (this.props.action !== undefined) 
    //then render 

Answer 1

ベストプラクティスは、例えば、PropTypesパッケージを使用することです：これはあなたのコンソールに警告メッセージが表示されます

import React, { Component } from 'react' 
import PropTypes from 'prop-types' 

class Person extends Component { 
    render() { 
    <h1>{this.props.name}</h1> 
    } 
} 

Person.propTyeps = { 
    name: PropTypes.string.isRequired 
} 

。

$ npm install --save prop-types 

あなたはより多くのドキュメントhereを見つけることができ、それが役に立てば幸い：あなたはそれをインストールする必要があり、それを使用するためには

。