web-dev-qa-db-ja.com

Reactコンポーネントにコンポーネントのデフォルトの小道具を設定する方法

以下のコードを使ってReactコンポーネントにデフォルトのプロップを設定しますが、うまくいきません。 render()メソッドでは、出力 "undefined props"がブラウザのコンソールに表示されているのがわかります。コンポーネントの小道具のデフォルト値をどのように定義できますか？

export default class AddAddressComponent extends Component {

render() {
   let {provinceList,cityList} = this.props
    if(cityList === undefined || provinceList === undefined){
      console.log('undefined props')
    }
    ...
}

AddAddressComponent.contextTypes = {
  router: React.PropTypes.object.isRequired
}

AddAddressComponent.defaultProps = {
  cityList: [],
  provinceList: [],
}

AddAddressComponent.propTypes = {
  userInfo: React.PropTypes.object,
  cityList: PropTypes.array.isRequired,
  provinceList: PropTypes.array.isRequired,
}
reactjsecmascript-6
110
Zhao Yi

Classブラケットを閉じるのを忘れました。

class AddAddressComponent extends React.Component {
  render() {
    let {provinceList,cityList} = this.props
    if(cityList === undefined || provinceList === undefined){
      console.log('undefined props')
    } else {
      console.log('defined props')
    }

    return (
      <div>rendered</div>
    )
  }
}

AddAddressComponent.contextTypes = {
  router: React.PropTypes.object.isRequired
};

AddAddressComponent.defaultProps = {
  cityList: [],
  provinceList: [],
};

AddAddressComponent.propTypes = {
  userInfo: React.PropTypes.object,
  cityList: React.PropTypes.array.isRequired,
  provinceList: React.PropTypes.array.isRequired,
}

ReactDOM.render(
  <AddAddressComponent />,
  document.getElementById('app')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app" />
117
Serhii Baraniuk

Babel ステージ2 または transform-class-properties のようなものを使っている人のために：

import React, { PropTypes, Component } from 'react';

export default class ExampleComponent extends Component {
   static contextTypes = {
      // some context types
   };

   static propTypes = {
      prop1: PropTypes.object
   };

   static defaultProps = {
      prop1: { foobar: 'foobar' }
   };

   ...

}

更新

React v15.5以降、PropTypesはメインのReactパッケージ（ link ）から移動しました：

import PropTypes from 'prop-types';

編集

@johndodoが指摘したように、staticクラスプロパティは実際にはES7仕様の一部ではありませんが、現在はbabelによってのみサポートされています。それを反映するように更新しました。

82
treyhakanson

最初にクラスを他のエクステンションから切り離す必要があります。例えばclass内でAddAddressComponent.defaultPropsを拡張することはできません。

コンストラクタ およびReactのライフサイクルについて読むことをお勧めします。 コンポーネントの仕様とライフサイクル を参照してください。

これがあなたが欲しいものです：

import PropTypes from 'prop-types';

class AddAddressComponent extends React.Component {
  render() {
    let { provinceList, cityList } = this.props;
    if(cityList === undefined || provinceList === undefined){
      console.log('undefined props');
    }
  }
}

AddAddressComponent.contextTypes = {
  router: PropTypes.object.isRequired
};

AddAddressComponent.defaultProps = {
  cityList: [],
  provinceList: [],
};

AddAddressComponent.propTypes = {
  userInfo: PropTypes.object,
  cityList: PropTypes.array.isRequired,
  provinceList: PropTypes.array.isRequired,
}

export default AddAddressComponent;
13
Ilanus

非構造化代入を使用することもできます。

class AddAddressComponent extends React.Component {
  render() {

    const {
      province="insertDefaultValueHere1",
      city="insertDefaultValueHere2"
    } = this.props

    return (
      <div>{province}</div>
      <div>{city}</div>
    )
  }
}

あなたが多くのコードを書く必要がないので、私はこのアプローチが好きです。

8
Sam Henderson

次のような静的defaultPropsを使用してください。

export default class AddAddressComponent extends Component {
    static defaultProps = {
        provinceList: [],
        cityList: []
    }

render() {
   let {provinceList,cityList} = this.props
    if(cityList === undefined || provinceList === undefined){
      console.log('undefined props')
    }
    ...
}

AddAddressComponent.contextTypes = {
  router: React.PropTypes.object.isRequired
}

AddAddressComponent.defaultProps = {
  cityList: [],
  provinceList: [],
}

AddAddressComponent.propTypes = {
  userInfo: React.PropTypes.object,
  cityList: PropTypes.array.isRequired,
  provinceList: PropTypes.array.isRequired,
}

撮影場所： https://github.com/facebook/react-native/issues/1772

型をチェックしたい場合は、treyhakansonまたはIlan Hasanovの回答でPropTypeを使用する方法を参照するか、または上記のリンクで多数の回答を確認してください。

5
Brandon Keith Biggs

以下に示すように、クラス名を使用してデフォルトの小道具を設定できます。

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

// Specifies the default values for props:
Greeting.defaultProps = {
  name: 'Stranger'
};

この link からReactの推奨する方法を使うことができます。

3
Rohith Murali

関数型propの場合は、次のコードを使用できます。

AddAddressComponent.defaultProps = {
    callBackHandler: () => {}
};

AddAddressComponent.propTypes = {
    callBackHandler: PropTypes.func,
};
2
Wolfack

機能部品を使用している場合は、次のように、分割代入でデフォルトを定義できます。

export default ({ children, id="menu", side="left", image={menu} }) => {
  ...
};
0
Brian Burns