React-Native での props の使用方法の詳細な説明

この記事ではReact-Nativeにおけるpropsの詳しい使い方を中心に紹介していますが、編集者がとても良いと思ったので、参考にさせていただきます。エディターに従って、プロパティを見てみましょう。プロパティは、コンポーネントの特性を記述するために存在します。親コンポーネントから子コンポーネントに渡されます。

前のページで渡された props を使用します

新しい PropsTest.js ファイルを作成します

exprot default class PropsTestextendesComponent{
  render(){
    return <Text>{this.props.name}</Text>
  }
}

前のページの PropsTest コンポーネントを使用します

import PropsTest from './PropsTest'

<PropsTest 
  name = &#39;XiaoMing&#39;
/>

注: 上記のコードはすべてコードです切れ端 。

デフォルトの属性とその機能

props 属性はすべて前のページから渡されるため、変更することはできません。ただし、PropsTest ファイルで props のいくつかのデフォルト値を定義できます。

exprot default class PropsTestextends Component{
  static defaultProps={
    name: 'XiaoHong'
  }
  render(){
    return <Text>{this.props.name}</Text>
  }
}

defaultProps は静的変更のために static キーワードを使用する必要があることに注意してください。このように、前のページで値が渡されなかった場合は、デフォルトの属性が表示されます。

props の制約とチェック

exprot default class PropsTestextends Component{
  static defaultProps={
    name: 'XiaoHong'
  }
  static propTypes={
    name: PropTypes.string,
    age: PropTypes.number,
    sex: PropTypes.string.isRequired
  }
  render(){
    return <Text>{this.props.name}</Text>
  }
}

props の属性のタイプを決定するには、propTypes を使用できます。また、それを変更するには static キーワードを使用する必要があります。

isRequired は必須項目を指定できます

注:

propTypes 属性は React パッケージに含まれており、使用する前にインポートする必要があります。

プロパティストレッチ演算子

ES6の最新構文コンポーネントに多くのプロパティが必要な場合は、次のようになります:

params = {name: 'XiaoZhang', age: 18, sex: '男'}

// 如果需要传递给下一个页面需要：
<PropsTest
  name = {params.name}
  sex = {params.sex}
  age = {params.age}
/>
// 等等，这样如果属性特别多，代码将会变得难以维护。

ES6の最新のストレッチ演算子機能を使用できます

<PropsTest
  {...params}
/>

非常にシンプル

代入の構造化

ES6の最新構文別のコンポーネントで拡張演算子を介して渡されたオブジェクトの一部を取得して使用したい場合は、代入の構造化

を使用できます

以上がReact-Native での props の使用方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。