react demo9 (组件属性验证propTypes)

最新推荐文章于 2022-08-24 17:06:20 发布

原创最新推荐文章于 2022-08-24 17:06:20 发布 · 309 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react

前端笔记同时被 2 个专栏收录

165 篇文章

订阅专栏

react

19 篇文章

订阅专栏

本文介绍如何在React中利用PropTypes对组件属性进行验证，确保title属性为必需的字符串类型，并通过示例代码展示了验证过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：定义一个组件，设置title属性必须是字符串
学习：组件属性验证propTypes

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>react dome</title>
    <script src="./build/react.js"></script>
    <script src="./build/react-dom.js"></script>
    <script src="./build/browser.min.js"></script>
</head>

<body>

<div id="container"></div>

<script type="text/babel">

    /*
    属性验证  propTypes
    组件类的属性
    用于验证组件实例的属性是否符合要求
    */

    //创建组件
    var ShowTitle = React.createClass({
        propTypes:{
            //title数据类型必须是字符串
            title:React.PropTypes.string.isRequired,
        },
        render:function(){
            return <h1>{this.props.title}</h1>
        }
    })


   //渲染
   ReactDOM.render(

       <ShowTitle title="我是字符串" />,

       document.getElementById("container")
   )

</script>

</body>
</html>