函数组件使用props

Tutorial: React基础 Category: React Published: 2026-04-07 13:58:26 Views: 20 Likes: 0 Comments: 0

17_函数组件使用props

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>对props进行限制</title>
  </head>

  <body>
    <!-- 准备好一个"容器" -->
    <div id="test1"></div>
    <div id="test2"></div>
    <div id="test3"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="./js/react.development.js"></script>

    <!-- 引入react-dom, 用于支持react操作DOM -->
    <script
      type="text/javascript"
      src="./js/react-dom.development.js"
    ></script>

    <!-- 引入babel, 用于将jsx转为js -->
    <script type="text/javascript" src="./js/babel.min.js"></script>

    <!-- 引入prop-types, 用于对组件标签属性进行限制 -->
    <script type="text/javascript" src="./js/prop-types.js"></script>

    <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, // 限制name必传, 且为字符串
        sex: PropTypes.string, // 限制sex为字符串
        age: PropTypes.number, // 限制age为数值
      };

      // 指定默认标签属性值
      Person.defaultProps = {
        sex: "男", // sex默认值为男
        age: 18, // age默认值为18
      };

      // 渲染组件到页面
      ReactDOM.render(
        <Person name="jerry" />,
        document.getElementById("test1")
      );
    </script>
  </body>
</html>
Prev: props的简写方式 Next: 字符串形式的ref