Props

React.jsのPropsを理解しようヘ(^o^)ノ

Hello [name] と表示する (App.js)

• this.props.xxx でプロパティにアクセスできる

import React from 'react'

class App extends React.Component {
  render(){
    return <div>Hello { this.props.name }</div>
  }
}

export default App

コンポーネントのプロパティにセット (main.js)

• <App name="foo" /> こんな感じ
  • 値がnumberやbooleanなら {} が必要だよ <App age={1} />

import React from 'react'
import ReactDom from 'react-dom'
import App from './App'

ReactDom.render(<App name="Shinosaka.rb"/>, document.getElementById('app'))

Hello Shinosaka.rb と表示されたら 🎉

Propにデフォルト値をセットする (App.js)

import React from 'react'

class App extends React.Component {
  render(){
    return <div>Hello { this.props.name }</div>
  }
}

// デフォルト値をセット
App.defaultProps = {
  name: 'Shinosaka.rb'
}

export default App

コンポーネントのプロパティの設定を削除 (main.js)

import React from 'react'
import ReactDom from 'react-dom'
import App from './App'

ReactDom.render(<App />, document.getElementById('app'))

Hello Shinosaka.rb と表示されたら 🎉

Propのタイプを指定する (App.js)

import React from 'react'

class App extends React.Component {
  render(){
    return <div>Hello { `${this.props.name} #${this.props.number}` } </div>
  }
}

// デフォルト値をセット
App.defaultProps = {
  name: 'Shinosaka.rb'
}

// タイプを指定
App.propTypes = {
  // 文字列
  name: React.PropTypes.string,
  // 数値で必須
  number: React.PropTypes.number.isRequired
}

export default App

ブラウザのコンソールにエラーが表示されていれば 🐛

index.js:8491 Warning: Failed propType: Required prop numberwas not specified inApp.

コンポーネントのプロパティにセット (main.js)

import React from 'react'
import ReactDom from 'react-dom'
import App from './App'

ReactDom.render(<App number={23} />, document.getElementById('app'))

Hello Shinosaka.rb #23 と表示されたら 🎉