react中的props的使用

理解:

  1. 每个组件对象都会有props(properties的简写)属性
  2. 组件标签的所有属性都保存在props中

作用:

  1. 通过标签属性从组件外向组件内传递变化的数据
  2. 注意: 组件内部不要修改props数据

编码操作

  1. 内部读取某个属性值
this.props.propertyName
  1. 对props中的属性值进行类型限制和必要性限制
Person.propTypes = {
name: React.PropTypes.string.isRequired,
age: React.PropTypes.number.isRequired
}
  1. 扩展属性: 将对象的所有属性通过props传递
<Person {...person}/>
  1. 默认属性值
Person.defaultProps = {
name: 'Mary'
}
  1. 组件类的构造函数
constructor (props) {
super(props)
console.log(props) // 查看所有属性
}

面试题

问题: 请区别一下组件的props和state属性

  1. state: 组件自身内部可变化的数据
  2. props: 从组件外部向组件内部传递数据, 组件内部只读不修改

具体案例,以及使用注意事项(复杂版)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello_react</title>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test1"></div>
    <div id="test2"></div>
    <div id="test3"></div>
    <!-- 引入的时候必须按照这个顺序-->
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom,用于支持react操作dom -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel,用于将jsx转化为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!-- 引入prop-types,用于对组件标签进行限制 -->
    <script type="text/javascript" src="../js/prop-types.js"></script>
    <script type="text/babel">
        // 1.创建组件
        class Person extends React.Component{
            state={name:'tom',age:'18',sex:'女'}
            render(){
                const {name,age,sex}=this.props
                return(
                    <ul>
                        <li>姓名:{name}</li>
                        <li>性别:{sex}</li>
                        <li>年龄:{age+1}</li>
                    </ul>
                )
            }
        }
        // 对标签属性进行类型,必要性的限制
        Person.propTypes={
            name:PropTypes.string.isRequired,//对名字进行限制必须是string类型,必填的
            sex:PropTypes.string,//限制性别为字符串
            age:PropTypes.number,//限制age为数字
            speack:PropTypes.func,//限制speack默认为函数
        }
        // 指定标签属性的默认值
        Person.defaultProps={
            sex:'不男不女',//设置性别默认值为不男不女
            age:18//设置年龄默认值为18
        }
        ReactDOM.render(<Person name="jerry" age={19} sex="男" speack={speack}/>,document.getElementById('test1'))
        ReactDOM.render(<Person name="tom" age={18} sex="女"/>,document.getElementById('test2'))
        const p={name:'xiaoxiao',age:18,sex:'女'}
        ReactDOM.render(<Person {...p}/>,document.getElementById('test3'))
        function speack(){
            console.log('我说话了')
        }
    </script>
</body>
</html>

精简版,可以利用类的static方式,把对标签属性进行类型,必要性的限制以及设置默认值的方法添加到类身上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello_react</title>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test1"></div>
    <div id="test2"></div>
    <div id="test3"></div>
    <!-- 引入的时候必须按照这个顺序-->
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom,用于支持react操作dom -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel,用于将jsx转化为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!-- 引入prop-types,用于对组件标签进行限制 -->
    <script type="text/javascript" src="../js/prop-types.js"></script>
    <script type="text/babel">
        // 1.创建组件
        class Person extends React.Component{
            constructor(props){
                // 构造器是否接受props,是否传递给super,取决于:是否希望在构造器中通过this访问props
                super(props)
                console.log(this.props) 
            }
            state={name:'tom',age:'18',sex:'女'}
             // 对标签属性进行类型,必要性的限制--------给Person添加PropTypes
            static propTypes={
                name:PropTypes.string.isRequired,//对名字进行限制必须是string类型,必填的
                sex:PropTypes.string,//限制性别为字符串
                age:PropTypes.number,//限制age为数字
            }
            // 指定标签属性的默认值
            static defaultProps={
                sex:'不男不女',//设置性别默认值为不男不女
                age:18//设置年龄默认值为18
            }
            render(){
                const {name,age,sex}=this.props
                return(
                    <ul>
                        <li>姓名:{name}</li>
                        <li>性别:{sex}</li>
                        <li>年龄:{age+1}</li>
                    </ul>
                )
            }
        }
        ReactDOM.render(<Person name="jerry"/>,document.getElementById('test1'))
        
    </script>
</body>
</html>

你可能感兴趣的:(react,react.js,javascript,前端)