react（8）——简单的了解props属性

最新推荐文章于 2022-04-26 00:33:02 发布

木子旭

最新推荐文章于 2022-04-26 00:33:02 发布

阅读量139

点赞数

分类专栏： # react 文章标签： React 组件 props 默认属性属性验证

本文链接：https://blog.csdn.net/qq_45895576/article/details/111238697

版权

react 专栏收录该内容

65 篇文章 5 订阅

订阅专栏

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05_component_props</title>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/prop-types.js"></script>
    <script src="../js/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<div id="example1"></div>
<div id="example2"></div>

<script type="text/babel">
    /*
    * 需求：自定义用来显示一个人员信息的组件，效果如页面。
    * 1.如果性别没有指定，则默认为男
    * 2.如果年龄没有指定，则默认为18
    * */

    //1.定义组件
    function Person(props){
        return(
            <ul>
                <li>性别：{props.name}</li>
                <li>年龄：{props.age}</li>
                <li>性别：{props.sex}</li>
            </ul>
        )
    }
    //1.1给组件指定属性默认值
    Person.defaultProps = {
        sex: '男',
        age: 18
    }
    //2.2给组件指定属性值的类型和必要性
    Person.propTypes={
        name: PropTypes.string.isRequired,
        age: PropTypes.number
    }

    //2.渲染组件标签
    const p1 = {
        name: 'Tom',
        age: 18,
        sex: '女'
    }
    ReactDOM.render(<Person name={p1.name} age={p1.age} sex={p1.sex} />,document.getElementById('example'))

    const p2 = {
        name: 'Jack'
    }
    ReactDOM.render(<Person name={p2.name}   />,document.getElementById('example1'))

    const p3 ={
        name:'Lucy',
        age:20,
        sex:'女'
    }
    ReactDOM.render(<Person {...p3}/>,document.getElementById('example2'))
</script>
</body>
</html>

运行结果：
在这里插入图片描述

代码讲解

组件中的props属性是一组组的键值对，从React.render()渲染时候获取
上面我们通过方法来定义组件，如果通过类类定义组件，则需要在props前面+this.

    class Person extends React.Component {
        render() {
            return (
                <ul>
                    <li>性别：{this.props.name}</li>
                    <li>年龄：{this.props.age}</li>
                    <li>性别：{this.props.sex}</li>
                </ul>
            )
        }
    }

给组件设置默认值用组件.defaultProps方法

Person.defaultProps = {
        sex: '男',
        age: 18
    }

给组件规定类型和格式用组件.propTypes方法；string、number代表该元素的类型；isRequired代表必填的内容

Person.propTypes = {
        name: PropTypes.string.isRequired,
        age: PropTypes.number
    }

{…p3}是讲p3这个类全部作为props传入组件

const p3 ={
        name:'Lucy',
        age:20,
        sex:'女'
    }
    ReactDOM.render(<Person {...p3}/>,document.getElementById('example2'))

木子旭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录