亲宝软件园·资讯

展开

React中props使用介绍

神也佑我YK 人气:0

1.继续深入state

state有两种用法:

setState({}) 和 setState(()=>{})

第一种用法本质是:我写了这个属性,然后进行覆盖操作。

第二种用法好处是:回调函数中的第一个参数是state。这样的话看起来获取到原先state上的数据也更加简单!

setState修改数据实现响应式的本质

在每次修改之后,会重新调用render函数。

2.props

什么是props?

​ props 是组件传递的参数。子组件通过this.props来接受!

在类组件中:

props通过子组件的this.props来接受父组件传过来的props值。

组件是可以复用的,最常见的就是循环来使用。与Vue不同的是:React他没有指令这一说法。jsx语法会自动循环数组。通常处理数组都采用高阶函数。例如

没有循环的用法:

 <div class="box1"></div>
    <script src="../../js/react.development.js"></script>
    <script src="../../js/react-dom.development.js"></script>
    <script src="../../js/babel.min.js"></script>
    <script type="text/babel">
        // 子组件
        class Info extends React.Component {
            render() {
                const { name, age, sex } = this.props
                return <div>
                    <h2>子组件Child</h2>
                    <div>姓名: {name}</div>
                    <div>年龄: {age}</div>
                    <div>性别: {sex}</div>
                </div>
            }
        }
        // 父组件
        class Demo extends React.Component {
            state = {
                arr: [
                    {
                        name: '北幕',
                        age: 18,
                        sex: "man"
                    },
                    {
                        name: '北幕',
                        age: 18,
                        sex: "man"
                    },
                    {
                        name: '北幕',
                        age: 18,
                        sex: "man"
                    }
                ]
            }
            render() {
                return (
                    <div>
                        <h1>我是Demo组件</h1>
                        <hr />
                        <Info name="耀阳" age="18" sex="男"></Info>
                        <Info name="吕德华" age="18" sex="男"></Info>
                        <Info name="北幕" age="18" sex="男"></Info>
                    </div>
                )
            }
        }
        ReactDOM.render(<Demo></Demo>, document.querySelector('.box1'))
    </script>

有循环的用法

  <div class="box1"></div>
    <script src="../../js/react.development.js"></script>
    <script src="../../js/react-dom.development.js"></script>
    <script src="../../js/babel.min.js"></script>
    <script type="text/babel">
        // 子组件
        class Info extends React.Component {
            render() {
                const { name, age, sex } = this.props
                return <div>
                    <h2>子组件Child</h2>
                    <div>姓名: {name}</div>
                    <div>年龄: {age}</div>
                    <div>性别: {sex}</div>
                </div>
            }
        }
        // 父组件
        class Demo extends React.Component {
            state = {
                arr: [
                    {
                        name: '北幕',
                        age: 18,
                        sex: "man"
                    },
                    {
                        name: '北幕',
                        age: 18,
                        sex: "man"
                    },
                    {
                        name: '北幕',
                        age: 18,
                        sex: "man"
                    }
                ]
            }
            render() {
                return (
                    <div>
                        <h1>我是Demo组件</h1>
                        <hr />
                        {
                            this.state.arr.map(item => <Info name={item.name} age={item.age} sex={item.sex} ></Info>)
                        }
                    </div>
                )
            }
        }
        ReactDOM.render(<Demo></Demo>, document.querySelector('.box1'))
    </script>

Props几个特点:

子组件不能修改传递的Props数据,只能由父组件来修改,或者从数据的源头来修改。

父组件传递参数,可以是其他的类型,利用jsx语法:{},跟vue的插值语法类似:都是js表达式!

父组件传递多个数据{…obj}

对象解构还是对象!!!

<div class="box1"></div>
    <script src="../../js/react.development.js"></script>
    <script src="../../js/react-dom.development.js"></script>
    <script src="../../js/babel.min.js"></script>
    <script type="text/babel">
        // 子组件
        class Info extends React.Component {
            render() {
                const { name, age, sex } = this.props
                return <div>
                    <h2>子组件Child</h2>
                    <div>姓名: {name}</div>
                    <div>年龄: {age}</div>
                    <div>性别: {sex}</div>
                </div>
            }
        }
        // 父组件
        class Demo extends React.Component {
            state = {
                obj: {
                    name: "耀阳1", age: "18", sex: "男"
                }
            }
            render() {
                return (
                    <div>
                        <h1>我是Demo组件</h1>
                        <hr />
                        <Info {...this.state.obj}></Info>
                        <Info name="吕德华" age="18" sex="男"></Info>
                        <Info name="北幕" age="18" sex="男"></Info>
                    </div>
                )
            }
        }
        ReactDOM.render(<Demo></Demo>, document.querySelector('.box1'))
    </script>

3.限制Props的传递类型

子组件接收父组件的类型,父组件可以随意的定义,

​ a. 子组件限制父组件传递的数据类型

​ b. 引入prop-types库

​ c. 需要在类上设置一个属性 propTypes,谁想限制给谁设置。写在类上面方法(静态方法)

​ d. 设置默认值 defaultProps = {}

这个不需要记住,用的时候查阅即可!

限制类型的简写:可以使用static静态方法。

4.函数接收props参数

函数中的state在hook中才能使用。暂时先不考虑。

函数的第一个参数就是props,在函数中只需要用第一个参数来接受即可

5.插槽

props下面的Childrene

加载全部内容

相关教程
猜你喜欢
用户评论