<script type="text/babel">
function Person(props) {
const { name, age, sex } = props;
return (
<ul>
<li>{name}</li>
<li>{sex}</li>
<li>{age + 1}</li>
</ul>
);
}
//对传入的数据类型进行限制
Person.propTypes = {
//表示姓名这个属性是字符串类型且必须是要传的
name: PropTypes.string.isRequired,
sex: PropTypes.string,
age: PropTypes.number,
};
//设置默认值
Person.defaultProps = {
sex: "不男不女",
age: 18,
};
//渲染
//这里面的{...p},相当于展开name: "Tom", sex: "男", age: "18"
ReactDOM.render(<Person name="Tom" />, document.getElementById("test"));
</script>
729_React_props限制函数式
- 本文链接: http://lzkpersonal.com.cn/2023/08/01/729-React-props限制函数式/
- 版权声明: 本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!