React/practise/28.函数组件 props 默认值.jsx

import React from 'react'

/* 函数组件默认值
第一种：使用 defaultProps
第二种：函数参数默认值（推荐方案）  {pageSize = 10 }

区别：第一种在用的时候组件内部已经有了 pageSize 这个 prop，第二种只要传递的时候组件内部才有这个 prop
*/


// 第二种：函数参数默认值（推荐方案）  {pageSize = 10 }
function Test ({pageSize = 10 }) {
    return (
        <div>
            this is test
            {pageSize}
        </div>
    )
}

// 设置默认值
// 第一种：使用 defaultProps
/* Test.defaultProps = {
    pageSize: 10           // 如果传数据，pageSize 就以传入的为主，如果不传就是 10
} */


class App extends React.Component {
    render () {
        return (
            <div>
                <Test pageSize={ 20 }/>
            </div>
        )
    }
}

export default App