[React06]组件实例核心属性之一props

[React06]组件实例核心属性之一props

现想实现如下功能：

首先新建一个页面，完成符合格式的静态页面的编写。

//创建类式组件
    class Person extends React.Component{
      render(){
        return(
          <ul>
            <li>姓名: Tom</li>
            <li>性别: 女</li>
            <li>年龄: 18</li>
          </ul>
        )
      }
    }
    //渲染组件到页面
    ReactDOM.render(<Person/>,document.getElementById('test'))

实现效果：

因此修改代码，将属性通过props进行传递，实现效果也没有变化。

//创建类式组件
    class Person extends React.Component{
      render(){
        return(
          <ul>
            <li>姓名: {this.props.name}</li>
            <li>性别: {this.props.sex}</li>
            <li>年龄: {this.props.age}</li>
          </ul>
        )
      }
    }
    //渲染组件到页面
    ReactDOM.render(<Person name='Tom' age='18' sex='女'/>,document.getElementById('test'))

但是东西很多时，还是希望能批量传过来，可以使用…的形式。

//创建类式组件
    class Person extends React.Component{
      render(){
        const {name,sex,age} = this.props
        return(
          <ul>
            <li>姓名: {name}</li>
            <li>性别: {sex}</li>
            <li>年龄: {age}</li>
          </ul>
        )
      }
    }
    //渲染组件到页面
    const p1 = {name:'tom',age:18,sex:'女'}
    ReactDOM.render(<Person {...p1}/>,document.getElementById('test'))

但是想给name、age以及sex加上规则，要使用propsTypes。
要先引入props-types.js，用于对组件标签属性进行限制。

<script src="../js/prop-types.js"></script>
  <script type="text/babel">
    //创建类式组件
    class Person extends React.Component{
      render(){
        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,//限制name必传，且为字符串
      sex: PropTypes.string,//限制sex为字符串
      age: PropTypes.number,//限制age为数字
      speak:PropTypes.func//限制speak为函数
    }
    //指定默认的标签属性值
    Person.defaultProps = {
      sex:'女',//限制sex默认值为女
      age: 18//限制sex默认值为18
    }
    function speak(){
      return (console.log('我会说话'))
    }
    //渲染组件到页面
    ReactDOM.render(<Person name='Terry' speak={speak}/>,document.getElementById('test'))
    ReactDOM.render(<Person name='Tom' age={22} sex='男'/>,document.getElementById('test1'))

    const p1 = {name:'老刘',age:18,sex:'女'}
    ReactDOM.render(<Person {...p1}/>,document.getElementById('test2'))

注意props是只读不改的。
现想将props写法简化。

//创建类式组件
    class Person extends React.Component{
      //对标签属性进行类型、必要性的限制
      static propTypes = {
        name: PropTypes.string.isRequired,//限制name必传，且为字符串
        sex: PropTypes.string,//限制sex为字符串
        age: PropTypes.number,//限制age为数字
        speak:PropTypes.func//限制speak为函数
      }
      //指定默认的标签属性值
      static defaultProps = {
        sex:'女',//限制sex默认值为女
        age: 18//限制sex默认值为18
      }
      render(){
        const {name,sex,age} = this.props
        return(
          <ul>
            <li>姓名: {name}</li>
            <li>性别: {sex}</li>
            <li>年龄: {age+1}</li>
          </ul>
        )
      }     
    }
    
    function speak(){
      return (console.log('我会说话'))
    }
    //渲染组件到页面
    ReactDOM.render(<Person name='Terry' speak={speak}/>,document.getElementById('test'))
    ReactDOM.render(<Person name='Tom' age={22} sex='男'/>,document.getElementById('test1'))
    const p1 = {name:'老刘',age:18,sex:'女'}
    ReactDOM.render(<Person {...p1}/>,document.getElementById('test2'))

之前写state时，有用到构造器，且构造器中传了props，代码如下：

constructor(props){
        super(props);
        //初始化状态
        this.state = {isHot:false,wind:'微风'}
        //解决changeWeather中的this指向问题
        this.changeState = this.changeWeather.bind(this)
      }

是否写构造器、构造器中是否接收props、是否传递给super，取决于是否希望在构造器中通过this访问props。
函数式组件使用props
在限制时，依然可以选择放在函数外

function Person(props){
      const {name,sex,age}=props
      return(
          <ul>
            <li>姓名: {name}</li>
            <li>性别: {sex}</li>
            <li>年龄: {age}</li>
          </ul>
        )
    }
    //渲染组件到页面
    ReactDOM.render(<Person name='Terry' sex='男' age='18'/>,document.getElementById('test'))

实现效果：

学习React笔记【自用】