一、函数组件
- 方式一:使用
defaultProps
设置默认值
import React from "react"; import PropTypes from 'prop-types'; function Sub (props) { return ( <> <div>子组件</div> { props.list.map((item, index) => <p key={index}>{item}</p>) } </> ) } class App extends React.Component { render () { return ( <div> <Sub></Sub> </div> ) } } // 设置默认值 Sub.defaultProps = { list: [5, 6, 7] } // 给组件 Sub 的属性定义校验规则 Sub.propTypes = { // 指定 list 数据必须为数组 list: PropTypes.array } export default App
推荐
方式二:使用函数参数
设置默认值
import React from "react"; import PropTypes from 'prop-types'; // 默认值写这里 function Sub ({ list = [7, 8, 9] }) { return ( <> <div>子组件</div> { list.map((item, index) => <p key={index}>{item}</p>) } </> ) } class App extends React.Component { render () { return ( <div> <Sub></Sub> </div> ) } } // 给组件 Sub 的属性定义校验规则 Sub.propTypes = { // 指定 list 数据必须为数组 list: PropTypes.array } export default App
二、类组件
- 方式一:使用
defaultProps
设置默认值
import React from "react"; import PropTypes from 'prop-types'; class Sub extends React.Component { render () { return ( <> <div>子组件</div> { this.props.list.map((item, index) => <p key={index}>{item}</p>) } </> ) } } class App extends React.Component { render () { return ( <div> <Sub></Sub> </div> ) } } // 设置默认值 Sub.defaultProps = { list: [5, 6, 7] } // 给组件 Sub 的属性定义校验规则 Sub.propTypes = { // 指定 list 数据必须为数组 list: PropTypes.array } export default App
- 方式二:使用
static defaultProps = {}
设置默认值
import React from "react"; import PropTypes from 'prop-types'; class Sub extends React.Component { // 设置默认值 static defaultProps = { list: [5, 6, 7] } render () { return ( <> <div>子组件</div> {/* 使用方式不变 */} { this.props.list.map((item, index) => <p key={index}>{item}</p>) } </> ) } } class App extends React.Component { render () { return ( <div> <Sub></Sub> </div> ) } } // 给组件 Sub 的属性定义校验规则 Sub.propTypes = { // 指定 list 数据必须为数组 list: PropTypes.array } export default App