React学习（从零基础到精通）1010

props的简写方式

    <script type="text/babel">
    //创建组件
    class Person extends React.Component {
        //对标签属性进行类型，必要性的限制
        static propTypes = {
            name:PropTypes.string.isRequired,//限制name必传且为字符串
            sex:PropTypes.string,//限制sex为字符串
            age:PropTypes.number,//限制age为数值
            speak:PropTypes.func//限制speak为函数，注意是func,包括string，number等都是为了避免和内置的对象产生冲突
        }
        //指定默认标签属性值
        static defaultProps = {
            sex:"男",//sex默认值为男
            age:18//age默认值为18
        }
        render(){
            // console.log(this);
            const {name,age,sex} = this.props;
            //props是只读的
            // this.props.name = "jaja"  //此行代码会报错，因为props是只读的
            return (
                <ul>
                    <li>姓名：{name}</li>
                    <li>年龄：{age+1}</li>
                    <li>性别：{sex}</li>
                </ul>
            )
        }
    }
    
    const p = {name:"jack",age:40,sex:"男"}
    ReactDOM.render(<Person name="tom" speak={speak}/>,document.getElementById("test"))
    ReactDOM.render(<Person name="jerry" age={28} sex="女"/>,document.getElementById("test2"))
    // ReactDOM.render(<Person name="jack" age="40" sex="男"/>,document.getElementById("test3"))
    ReactDOM.render(<Person {...p}/>,document.getElementById("test3"))
    function speak(){
        console.log("我说话了");
    }
    </script>