mo49
4/4/2020 - 6:22 AM

00_ReactPropTypes.md

import React from 'react';
import ReactDOM from 'react-dom';
import MyHello from './MyHello';

const data = {
  name: 'tanaka',
  sex: '男'
}

ReactDOM.render(
  <React.StrictMode>
    <MyHello {...data} />
  </React.StrictMode>,
  document.getElementById('root')
);
import React, {Component} from 'react'
import PropTypes from 'prop-types'

class MyHello extends Component {
    render(){
        return (
            <div>
                <div>hello, {this.props.name}</div>
                <div>sex: {this.props.sex}</div> 
            </div>
        )
    }
}

// 型定義
MyHello.propTypes = {
    name: PropTypes.string.isRequired,
    sex: PropTypes.oneOf(['男','女','不明']) // 値が列挙値の中の一つである
}

// 規定値
MyHello.defaultProps = {
    name: '匿名'
}

export default MyHello
// staticでクラス内のメンバーとしてまとめた方が美しい

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

class MyHello extends Component {
    static propTypes = {
        name: PropTypes.string.isRequired,
        sex: PropTypes.oneOf(['男','女','不明']) // 値が列挙値の中の一つである
    }
    
    static defaultProps = {
        name: '匿名'
    }

    render(){
        return (
            <div>
                <div>hello, {this.props.name}</div>
                <div>sex: {this.props.sex}</div> 
            </div>
        )
    }
}

export default MyHello