React 组件实例的三大核心—props

0x00 前言

• CTF 加解密合集
• CTF Web合集
• 网络安全知识库
• 溯源相关

文中工具皆可关注 皓月当空w 公众号 发送关键字 工具 获取

0x01 props 基础

1.props渲染

1.1 常规渲染

class Person extends React.Component{
                render(){
                    const {name,age,sex} = this.props
                    return (
                        <ul>
                            <li>姓名:{name}</li>
                            <li>性别:{sex}</li>
                            <li>年龄:{age}</li>
                        </ul>
                    )
                }
            }

            ReactDOM.render(<Person name="Em" age="18" sex="女"/>,document.getElementById('test'))
1
2
3
4
5
6
7
8
9
10
11
12
13
14

1.2 展开运算符渲染

            const p ={name:"张三",age:"18",sex:"女"}

            ReactDOM.render(<Person {...p}/>,document.getElementById('test2'))
1
2
3

2.props限制

2.1 属性限制

Person.propTypes ={
                name:PropTypes.string.isRequired,
                sex:PropTypes.string,
                age:PropTypes.number,
            }
1
2
3
4
5

2.2 必要性限制

name:PropTypes.string.isRequired,
1

2.3 默认值

            Person.defaultProps={
                sex:"无",
                age:"18"
            }
1
2
3
4

2.4 限制方法

            Person.propTypes ={
                name:PropTypes.string.isRequired,
                sex:PropTypes.string,
                age:PropTypes.number,
                speck:PropTypes.func,
            }
1
2
3
4
5
6

3.props只读

在props中的属性是只读的，无法修改数据

4.函数式 props使用

<script type="text/babel">
        function Person(props){
            const {name,age,sex} = props
            return (
                <ul>
                    <li>姓名:{name}</li>
                    <li>性别:{sex}</li>
                    <li>年龄:{age}</li>
                </ul>
            )
        }

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

        Person.defaultProps={
            sex:"无",
            age:18
        }


        ReactDOM.render(<Person name="张三"/>,document.getElementById("test"))
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

other

欢迎大家关注我朋友的公众号 皓月当空w 分享漏洞情报以及各种学习资源，技能树，面试题等。

以上