react组件三大属性之props

入门

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>04_component_props</title>
</head>
<body>

<ul>
  <li>姓名: 李白</li>
  <li>性别: 男</li>
  <li>年龄:13</li>
</ul>
<hr>

<div id="example"></div>
<div id="example2"></div>

<script src="../js/react.js"></script>
<script src="../js/react-dom.js"></script>
<script src="../js/babel.min.js"></script>
<script src="https://cdn.bootcss.com/prop-types/15.6.2/prop-types.js"></script><!--浏览器 警告提示-->
<script type="text/babel">
  
  class Person extends React.Component{
      render () {
          console.log(this.props);
          return (
                  <ul>
                  <li>姓名：{this.props.username}</li>
                  <li>年龄：{this.props.age}</li>
                  <li>性别：{this.props.sex}</li>
                  </ul>
          )
      }
  }
//设置组件的默认值 当渲染没写这个：sex={person.sex}时候 默认sex为男
  Person.defaultProps = {
      sex: '男'
  };
 // 对props中的属性值进行类型限制和必要性限制 比如该组件的username必须是String类型 且必须;age必须是number类型且必须
  Person.propTypes = {
      username: React.PropTypes.string.isRequired,
      age: React.PropTypes.number.isRequired
  };
  let person = {username:'张三',sex:'男',age:18}
  ReactDOM.render(<Person username={person.username}  sex={person.sex}/>,document.getElementById("example"));
</script>
</body>
</html>

运行
在这里插入图片描述
当然也可以对person进行如下操作：

  //也可这样
  ReactDOM.render(<Person {...person}/>,document.getElementById("example2"));

运行结果：
在这里插入图片描述

组件嵌套：
在App组件里面嵌套Welcome组件

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>05_components_composing</title>
</head>
<body>

<div id="example"></div>

<script src="../js/react.js"></script>
<script src="../js/react-dom.js"></script>
<script src="../js/babel.min.js"></script>
<script src="https://cdn.bootcss.com/prop-types/15.6.2/prop-types.js"></script><!--浏览器 警告提示-->
<script type="text/babel">
  /*
   1. 拆分组件: 拆分界面, 抽取组件
     * 单个标题组件: Welcome
     * 应用组件: App
   2. 分析确定传递数据和数据类型
     * Welcome: props.name  string
     * App: props.names    array
   */

//定义组件
  class App extends React.Component{
      render () {
          let arr = this.props.arr;
          return (
                  <div>
                      {
                          arr.map((item,index) => {
                              return <Welcome key={index} name={item}/>
                          })
                      }
                  </div>
          )
      }
  }
//定义组件
  function Welcome(props) {
      return <h1>welcome {props.name} </h1>
  }
let arr = ['张三','李四','王五'];
  ReactDOM.render(<App  arr={arr}/>,document.getElementById("example"));
</script>
</body>
</html>

效果：
在这里插入图片描述

react组件三大属性之props

猜你喜欢