组件传值

eg：代表代码对照 若文章有误，欢迎读者指出

组件的嵌套
组件的嵌套，直接引入组件，然后直接当作自定义标签占位符使用【不需要注册】

props传值
组件间传值，在React中是通过只读属性 props 来完成数据传递的。

props：接受任意的入参，并返回用于描述页面展示内容的 React 元素。

  1. 函数组件

    函数组件可以通过props直接获取父组件传递的值【没有this，注意得把props传递进去，才能使用props】

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    { /* 父组件 */ }
    <Child2 hobby={'aaaa'}/>

    { /* 子组件 */ }
    const Child2 = (props) => {
        // 函数组件可以通过props直接获取父组件传递的值【没有this，注意得把props传递进去，才能使用props】
        return (
            <div>
                爱好-{props.hobby}
            </div>
        )
    }

  2. 类组件

    类组件，可以通过this.props.num 直接获取父组件传递过来的值
    只读，单向数据流，父组件更新，子组件也随之更新
    只要props中有数据，必定是父组件传递的值，vue react vue3同理
    注意点：里面不能随便写计时器等其它内容，按照类的写法去写

    1
    2
    3
    4
    5
    6
    7
    8
    { /* 父组件 */ }
    <Child name="小明" age={22}/>

    { /* 子组件 */ }
    <div>
        姓名：{this.props.name}<br/>年龄：{this.props.age}
    </div>

事件【分函数组件、类组件】

事件对象

react事件对象叫混合事件对象，全称SyntheticBaseEvent，是react为了提高性能所封装。
原生事件对象具有的功能，混合事件对象也具有。
为什么react要封装事件对象？

  1. 为了更好的跨平台和兼容性，react中的event没有兼容性问题。
  2. 为了统一管理所有的事件，所有的事件都是直接绑定在document上的。提高性能。避免频繁解绑。
  3. 方便统一管理，（事务机制）

eg1:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import React, { Component } from 'react'

class EventDemo extends Component {

    handleClick = (e) => {
        console.log('事件对象：', e)
        console.log('事件类型：', e.type)
        console.log('事件源：', e.target)
        console.log('javascript原生事件对象：', e.nativeEvent) // vue事件对象是原生的
    }

    handleClickA = (val, e) => {
        console.log('参数：', val)
        console.log('事件对象：', e)
    }

    render() {
        return (
            <div>
                <h3>事件对象</h3>
                {/* 不传递参数，on+事件类型（首字母大写） */}
                <button onClick={this.handleClick}>点击1</button>
                {/* 传递参数，需要回调，如果不回调，就会直接调用一次 */}
                <button onClick={(e) => this.handleClickA('aaa', e)}>点击2</button>
            </div>
        )
    }
}

export default EventDemo

点击事件

函数组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 函数组件
import React from 'react'

const ClickDemo = () => {
    var handleClick = () => {
        console.log('点击了1')
    }
    var handleClickA = (val) => {
        console.log('点击了2', val)
    }
    return (
        <div>
            <h3>函数组件点击事件</h3>
            {/* 不传递参数 */}
            <button onClick={handleClick}>点击1</button>
            {/* 传递参数，需要回调 */}
            <button onClick={() => handleClickA('bbb')}>点击2</button>
        </div>
    )
}

export default ClickDemo

类组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// 类组件
import React, { Component } from 'react'

class ClickDemo extends Component {
    // 类组件里面方法的三种不同写法
    handleClick() {
        console.log('点击了1')
    }
    handleClickA = () => {
        console.log('点击了2')
    }
    handleClickB = (val) => {
        console.log('点击了3', val)
    }
    render() {
        return (
            <div>
                <h3>类组件点击事件</h3>
                {/* 不传递参数 */}
                <button onClick={this.handleClick}>点击1</button>
                <button onClick={this.handleClickA}>点击2</button>
                {/* 传递参数，需要回调 */}
                <button onClick={() => this.handleClickB('aaa')}>点击3</button>
            </div>
        )
    }
}

export default ClickDemo