729_React_props限制

<script type="text/babel">
      class Person extends React.Component {
        render() {
          console.log(this);
          const { name, sex, age } = this.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,
        speak: PropTypes.func, //限制传入的speak必须是函数
      };
      function speak() {
        console.log("我要说话");
      }

      //设置默认值,也会被添加到props里面
      Person.defaultProps = {
        sex: "不男不女",
        age: 18,
      };
      let p = { name: "Tom", age: 19 };
      //渲染
      //这里面的{...p}，相当于展开name: "Tom", sex: "男", age: "18"
      ReactDOM.render(
        <Person {...p} speak={speak} />,
        document.getElementById("test")
      );
    </script>