一、函数式组件的 props
function Demo (props) { // 由于函数式组件没有自己的 this 必须指定 propsreturn (<div><ul><li>{props.name}</li><li>{props.age}</li></ul></div>)
}// 抽离挂到组件上面的 props 变量
const person = {name: 'mary',age: 18}
ReactDOM.render(<Demo {...person} />, document.getElementById('root'));
// {...person} --> 解构
二、类式组件的 props
class Demo extends React.Component {render() {const {name, age} = this.props; // 解构赋值的方式获取 props 上面的值return (<div><ul><li>{name}</li><li>{age}</li></ul></div>)}
}// 提取组件里面的 props 变量
const person = {name: 'mary', age: 18};
ReactDOM.render(<Demo {...person} />, document.getElementById('root'));
三、对 props 属性值类型进行限制
- 引入
props-types.js
<script src="https://cdn.staticfile.org/prop-types/15.6.1/prop-types.js"></script>
- 限制
props属性值的类型
Demo.propTypes = {name: PropTypes.string, // name : stringage: PropTypes.number, // name : numbersex: PropTypes.string // name : string
}
// 如果传入 props 属性的值类型不对应，就会报错
- 为
props属性的值指定默认值
Demo.defaultProps = {sex: 'male', // sex 不传值 默认为 male
}
