729_React_props限制简写

<script type="text/babel">
      class Person extends React.Component {
        constructor(props) {
          super(props);
          console.log(props);
          //传不传props,取决于要不要用到this.props
          console.log(this.props);
        }
        //对传入的数据类型进行限制
        static propTypes = {
          //表示姓名这个属性是字符串类型且必须是要传的
          name: PropTypes.string.isRequired,
          sex: PropTypes.string,
          age: PropTypes.number,
          speak: PropTypes.func, //限制传入的speak必须是函数
        };

        //设置默认值
        static defaultProps = {
          sex: "不男不女",
          age: 18,
        };
        render() {
          console.log(this);
          const { name, sex, age } = this.props;
          //props是只读的，不能修改
          //this.props.age=80  //报错
          return (
            <ul>
              <li>{name}</li>
              <li>{sex}</li>
              <li>{age + 1}</li>
            </ul>
          );
        }
      }

      function speak() {
        console.log("我要说话");
      }

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