React 组件实例的三大核心

本文链接：https://blog.csdn.net/HAI_WD/article/details/132818654

0x00 前言

文中工具皆可关注皓月当空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 展开运算符渲染

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

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

2.props限制

2.1 属性限制

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

2.2 必要性限制

name:PropTypes.string.isRequired,

2.3 默认值

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

2.4 限制方法

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

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>