React组件实例核心属性之props(学习笔记)

props基本使用

从组件外部传进来的属性，可以通过props来获取

<script type="text/babel">
//创建组件
    class Person extends React.Component {
        render() {
            // console.log(this);
            // 从组件外部传进来的属性，可以通过this.props来获取
            const {name, age, sex} = this.props
            return (
              <ul>
                <li>姓名：{name}</li>
                <li>性别：{sex}</li>
                <li>年龄：{age + 1}</li>
              </ul>
            )
        }
    }

    //渲染组件到页面
    ReactDOM.render(<Person name="jerry" age={19} sex="男"/>, document.getElementById('test1'))
    ReactDOM.render(<Person name="tom" age={18} sex="女"/>, document.getElementById('test2'))
    
    // 批量传递属性
    const p = {name: '老刘', age: 18, sex: '女'}
    // console.log('@',...p); 打印不出东西
    // ...展开对象只能在react组件标签中使用（js中...不能展开对象）
    ReactDOM.render(<Person {...p}/>, document.getElementById('test3'))
</script>

对props类型限制

用类.propTypes对象来对标签属性进行类型、必要性的限制，用类.defaultProps对象来指定标签属性的默认值，用PropTypes来指定属性具体的类型和必要性。

<!-- 引入prop-types，用于对组件标签属性进行限制 -->
<script type="text/javascript" src="../js/prop-types.js"></script>

<script type="text/babel">
    //创建组件
    class Person extends React.Component {
        render() {
            // console.log(this);
            const {name, age, sex} = this.props
            //props是只读的
            //this.props.name = 'jack' //此行代码会报错，因为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为函数（注意函数类型是func）
    }
    //指定默认标签属性值
    Person.defaultProps = {
        sex: '男',//sex默认值为男
        age: 18 //age默认值为18
    }
    //渲染组件到页面
    ReactDOM.render(<Person name={100} speak={speak}/>, document.getElementById('test1'))
    ReactDOM.render(<Person name="tom" age={18} sex="女"/>, document.getElementById('test2'))

    const p = {name: '老刘', age: 18, sex: '女'}
    // console.log('@',...p);
    ReactDOM.render(<Person {...p}/>, document.getElementById('test3'))

    function speak() {
        console.log('我说话了');
    }
</script>

props简写形式

直接在类里面通过static propTypes和static defaultProps声明静态属性，效果和上面的一样

<!-- 引入prop-types，用于对组件标签属性进行限制 -->
<script type="text/javascript" src="../js/prop-types.js"></script>

<script type="text/babel">
    //创建组件
    class Person extends React.Component {

        //对标签属性进行类型、必要性的限制
        static propTypes = {
            name: PropTypes.string.isRequired, //限制name必传，且为字符串
            sex: PropTypes.string,//限制sex为字符串
            age: PropTypes.number,//限制age为数值
        }

        //指定默认标签属性值
        static defaultProps = {
            sex: '男',//sex默认值为男
            age: 18 //age默认值为18
        }

        render() {
            // console.log(this);
            const {name, age, sex} = this.props
            //props是只读的
            //this.props.name = 'jack' //此行代码会报错，因为props是只读的
            return (
              <ul>
                <li>姓名：{name}</li>
                <li>性别：{sex}</li>
                <li>年龄：{age + 1}</li>
              </ul>
            )
        }
    }
    //渲染组件到页面
    ReactDOM.render(<Person name="jerry"/>, document.getElementById('test1'))
</script>

构造器中的props

类组件中能不用构造器就不用，能不需要通过this访问props就不用构造器

<!-- 引入prop-types，用于对组件标签属性进行限制 -->
<script type="text/javascript" src="../js/prop-types.js"></script>

<script type="text/babel">
    //创建组件
    class Person extends React.Component {
        constructor(props) {
            //构造器是否接收props，是否传递给super，取决于：是否希望在构造器中通过this访问props
            // 如果构造器不接收props，props不传递给super，this.props的值是undefined
            // console.log(props);
            super(props)
            console.log('constructor', this.props);
        }

        //对标签属性进行类型、必要性的限制
        static propTypes = {
            name: PropTypes.string.isRequired, //限制name必传，且为字符串
            sex: PropTypes.string,//限制sex为字符串
            age: PropTypes.number,//限制age为数值
        }

        //指定默认标签属性值
        static defaultProps = {
            sex: '男',//sex默认值为男
            age: 18 //age默认值为18
        }

        render() {
            // console.log(this);
            const {name, age, sex} = this.props
            //props是只读的
            //this.props.name = 'jack' //此行代码会报错，因为props是只读的
            return (
              <ul>
                <li>姓名：{name}</li>
                <li>性别：{sex}</li>
                <li>年龄：{age + 1}</li>
              </ul>
            )
        }
    }
    //渲染组件到页面
    ReactDOM.render(<Person name="jerry"/>, document.getElementById('test1'))
</script>

函数式组件使用props

函数式组件可以接收一个参数props

<script type="text/babel">
    //创建组件
    // 函数式组件可以接收一个参数props
    function Person(props) {
        const {name, age, sex} = props
        return (
          <ul>
            <li>姓名：{name}</li>
            <li>性别：{sex}</li>
            <li>年龄：{age}</li>
          </ul>
        )
    }

    Person.propTypes = {
        name: PropTypes.string.isRequired, //限制name必传，且为字符串
        sex: PropTypes.string,//限制sex为字符串
        age: PropTypes.number,//限制age为数值
    }

    //指定默认标签属性值
    Person.defaultProps = {
        sex: '男',//sex默认值为男
        age: 18 //age默认值为18
    }
    //渲染组件到页面
    ReactDOM.render(<Person name="jerry"/>, document.getElementById('test1'))
</script>