React学习 --- 三.PropTypes传值约束_type 'props' does not satisfy the constraint 'comp-优快云博客

本文链接：https://blog.youkuaiyun.com/u013692823/article/details/100776767

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ProtoTypes</title>
    <script src="../reactJs/react.development.js"></script>
    <script src="../reactJs/react-dom.development.js"></script>
    <script src="../reactJs/babel.min.js"></script>
    <script src="../reactJs/prop-types.js"></script>
    <style>
    </style>
</head>

<body>
<div id="root"></div>

</body>

<script type="text/babel">
    /*
    * 组件的属性可以接受任意值,字符串,对象,函数都可以.有时,我们需要一种机制,验证别人使用组件时,提供的参数是否符合要求
    * 组件类的 ProtoTypes属性就是用来验证组件实例的属性是否符合要求的.
    * */
    class MyTitle extends React.Component {
        // getDefaultProps() { //这个函数只支持使用React.createClass方法创建的MyTitle类 Use a static property to define defaultProps instead.
        //     return {
        //         title: 'Rate',
        //     };
        // }
        static propTypes = {
            title:PropTypes.string.isRequired
        }
        render() {
            return <h1>{this.props.title}</h1>
        }
    }
    console.log(MyTitle);
    // 指定 props 的默认值：
    MyTitle.defaultProps = { //当title的值为空的时候渲染
        title: 'Stranger'
    };
    var title = "Alex";
    ReactDOM.render(
        <MyTitle tilte={title}/>,
        document.getElementById("root")
    )
    /*
    * 更多的 propTypes验证 请查看官方文档  https://reactjs.org/docs/components-and-props.html
    * */
</script>
</html>