react基础语法(2)

大家好,我是大帅子,昨天跟大家讲完了基础的语法,今天就要大家讲一下react中的组件传值了,在讲组件传值之前我先给推荐大家下载几个 React 中几个常用的vscode插件吧,直接给大家上截屏,大家直接在vscode中的插件搜索下载就好了

---

React 组件通讯三种方式

1. 父子组件之间
2. 兄弟组件之间
3. 跨组件层级

为什么需要组件传值呢?

1. 组件是独立且封闭的单元，默认情况下，只能使用组件自己的数据
2. 在组件化过程中，我们将一个完整的功能拆分成多个组件，以更好的完成整个应用的功能。
3. 而在这个过程中，多个组件之间不可避免的要共享某些数据
4. 为了实现这些功能，就需要打破组件的独立封闭性，让其与外界沟通。这个过程就是组件通讯。

props基本使用 (父->子)

步骤

1. 父组件使用子组件时，传入自定义属性
2. 子组件内部接收属性

格式

父组件-传入数据

<子组件 自定义属性1={值1} 自定义属性2={值2} .... />

子组件-函数式组件-接收数据

// 接收数据： 函数组件需要通过补充形参来获取
function 子组件(props) {
  console.log('从父组件中传入的自定义属性被收集在对象:', props)
  return (<div>子组件的内容</div>)
}

子组件-类组件-接收数据

// 接收数据： class 组件需要通过 this.props 来获取
class 子组件 extends Component {
  console.log('从父组件中传入的自定义属性被收集在对象:', this.props)
  render() { return (<div>子组件的内容</div>) }
}

组件通讯(父->子)

核心代码

父组件提供数据并且传递给子组件

class Parent extends React.Component {
    state = { lastName: '王' }
    render() {
        return (
            <div>
                传递数据给子组件：<Child name={this.state.lastName} />
            </div>
        )
    }
}

子组件接收数据

function Child(props) {
    return <div>子组件接收到数据：{props.name}</div>
}

组件通讯(子->父)

核心代码

父组件提供函数并且传递给子组件

class Parent extends React.Component {
    state: {
      num: 100
    }
    f = (num) => {
        console.log('接收到子组件数据', num)
    }
    render() {
        return (
            <div>
                子组件：<Child f={this.f} />
            </div>
        )
    }
}

子组件接收函数并且调用

class Child extends React.Component {
    handleClick = () => {
      // 调用父组件传入的props，并传入参数
        this.props.f(100)
    }
    return (
        <button onClick={this.handleClick}>点我，给父组件传递数据</button>
    )
}

组件通讯(兄弟组件<->兄弟组件)

兄弟组件之间本身不能传值,需把共享状态提升到最近的相同父组件上面(如图所示)

核心代码

• parent.js

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import Jack from './Jack'
import Rose from './Rose'
class App extends Component {
  // 1. 状态提升到父组件
  state = {
    msg: '',
  }
  render() {
    return (
      <div>
        <h1>我是App组件</h1>
        <Jack say={this.changeMsg}></Jack>
        {/* 2. 把状态给子组件显示 */}
        <Rose msg={this.state.msg}></Rose>
      </div>
    )
  }
  changeMsg = (msg) => {
    this.setState({
      msg,
    })
  }
}
​
// 渲染组件
ReactDOM.render(<App />, document.getElementById('root'))

Son1.js

import React, { Component } from 'react'
​
export default class Jack extends Component {
  render() {
    return (
      <div>
        <h3>我是Jack组件</h3>
        <button onClick={this.say}>说</button>
      </div>
    )
  }
  say = () => {
    this.props.say('you jump i look')
  }
}
​

Son2.js

import React, { Component } from 'react'
​
export default class Rose extends Component {
  render() {
    return (
      <div>
        <h3>我是Rose组件-{this.props.msg}</h3>
      </div>
    )
  }
}
​

---

那今天先讲这么多吧,总结不好,多多指教,谢谢大家 🥰