React-创建组件、父传子、子传父

傷城~ 2023-07-03 12:17 10阅读 0赞

组件是 React 的核心，是 View 的重要组成部分；React 中的组件分为两种：一种是函数组件（使用函数来创建组件），另一种是类组件（通过类创建的组件）。

#### 通过函数来定义组件 ####

通过函数定义的组件被称为无状态组件，没有自己的私有数据；在定义时函数名称的首字母必须要大写，React 在解析时会按照组件的形式去解析

函数值必须要有返回值，返回值为 jsx 语法；使用时将函数名作为标签使用，可以是单标签 `<tag/>`也可以是双标签 `<tag></tag>`

###### 组件传参 ######

组件传参是在使用组件时通过自定义属性的方式传递，通过定义组件 函数的形参 `props`（虽然名字可以随便起，但一般都用 props）来接收，该参数是一个对象，遵循单项数据流（和 vue 中的一样，父传子，子可以接收但是不能修改也不能添加）

示例：

import React from 'react'
    import ReactDOM from 'react-dom'
     
    function Child (props) { 
      // 不能修改
      // props.name = 'www'
    
      return (
        <div>
          { /* 使用传递过来的数据 */}
          <p>{ props.name}</p>
          <p>{ props.age}</p>
        </div>
      )
    }
    
    // 渲染
    ReactDOM.render(<Child name="大熊" age={ 20} />, document.getElementById('root'))

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]

#### 通过 class 定义组件 ####

语法：

class name extends React.Component { 
      render() { 
        return (
    	  { /* jsx代码 */}
    	)
      }
    }

*  `name` 组件名称，首字母大写

使用 class 创建类，结合 extends 关键字，继承了 `React.Compponent` 之后，这个类就是组件模板了，通过 class 创建的组件可以拥有自己的私有数据；组件创建完成后通过标签的形式即可使用。

在定义的组件中必须要定义一个 render 函数； `render` 函数中必须要设置返回值，没有需要返回的内容时返回 `null` 即可。

通过 class 创建的组件，获取传递的数据不需要预先定义 `props` ，直接在组件中通过 `this.props.属性名` 即可获取相关的值； `class` 创建的组件其 `props` 也是只读的。

如果显式的调用了 `constructor` 则必须在 `constructor` 内部首先调用一下 `super()`，获取组件传递的数据需要在 `constructor` 方法中设置一个形参 `props` ，通过该形参即可获取传递过来的属性。

示例：

import React from 'react'
    import ReactDOM from 'react-dom'
    
    // 通过 class 来创建组件
    class Hello extends React.Component { 
      // 显式定义 constructor，定义形参 props
      constructor(props) { 
        // 首先调用 super()
        super()
        // react 中的私有数据使用 state 变量来表示，相当于 vue 中的 data 属性
        this.state = { 
          hobby: '打豆豆',
          sex: '女'
    	}
      }
      render () { 
        // return nul
        return (
          <div>
            <h1>通过 class 创建的组件</h1>
            <p>{ this.props.name}</p>
          </div>
        )
      }
    }
    
    // 渲染
    ReactDOM.render(<Hello name="莲妹" age={ 18} />, document.getElementById('root'))

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 1]

###### 子传父 ######

通过定义属性的方式将父组件中的方法传递给子组件，在子组件中去调用这个方法并向父组件传递数据。

示例：

import React from 'react'
    import ReactDOM from 'react-dom'
    
    // 创建父组件
    class Father extends React.Component { 
      state = { 
        pmsg: '父组件'
      }
      render () { 
        return (
          <div>
            <h1>{ this.state.pmsg}</h1>
            { /* 使用子组件，并向子组件传递方法 */}
            <Child pfn={ this.pfun} />
          </div>
        )
      }
      // 父组件中的方法
      pfun (res) { 
        // 打印父组件接收到的数据
        console.log(res)
      }
    }
    
    // 创建子组件
    class Child extends React.Component { 
      state = { 
        cmsg: '子组件',
        data: '子组件中的数据'
      }
      render () { 
        return (
          <div>
            <h3>{ this.state.cmsg}</h3>
            { /* 调用自己的方法 */}
            <button onClick={ this.cfun.bind(this)}>子组件的按钮</button>
          </div>
        )
      }
      cfun () { 
        // 通过 props 调用父组件传过来的方法，并向父组件传递数据
        this.props.pfn(this.state.data)
      }
    }
    ReactDOM.render(<Father />, document.getElementById('root'))

![在这里插入图片描述][20200213201649205.gif]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200208204320452.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200208204500176.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ==,size_16,color_FFFFFF,t_70
[20200213201649205.gif]: https://img-blog.csdnimg.cn/20200213201649205.gif