0%

729_React_props限制函数式

<script type="text/babel">
      function Person(props) {
        const { name, age, sex } = props;
        return (
          <ul>
            <li>{name}</li>
            <li>{sex}</li>
            <li>{age + 1}</li>
          </ul>
        );
      }
      //对传入的数据类型进行限制
      Person.propTypes = {
        //表示姓名这个属性是字符串类型且必须是要传的
        name: PropTypes.string.isRequired,
        sex: PropTypes.string,
        age: PropTypes.number,
      };

      //设置默认值
      Person.defaultProps = {
        sex: "不男不女",
        age: 18,
      };

      //渲染
      //这里面的{...p},相当于展开name: "Tom", sex: "男", age: "18"
      ReactDOM.render(<Person name="Tom" />, document.getElementById("test"));
    </script>