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