React进阶组件--props、组件通讯(React学习笔记_

React进阶组件

组件的props、组件通信

组件的props

组件是封闭的，要接收外部数据应该通过props来实现。

• props的作用：接收传递给组件的数据
• 传递数据：给组件标签添加属性
• 接受数据：函数组件通过参数props接收数据，类组件通过this.props接收数据

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

// 类组件
class Hello extends React.Component {
  render() {
    return (
      <div>接收到的数据：{this.props.name}</div>
    )
  }
}

class App extends React.Component {
  render() {
    return (
       <Hello name="xiaowang" age={18}/>
    )
  }
}

• props是只读的对象，只能读取属性的值，无法修改对象

• 使用类组件的时候，如果写了构造函数，应该将props传递给super()，否则，无法再构造函数中获取到props

class Hello extends React.Component {
  constructor() {
    super()
    console.log('props======>', this.props)
  }
  render() {
    return (
      <div>接收到的数据：{this.props.name}</div>
    )
  }
}
class App extends React.Component {
  render() {
    return (
      <Hello name="xiaowang" age={18}/>
    )
  }
}

image

以上代码，推荐使用:

constructor(props) {
  super(props)
  console.log('props======>', props)
}

组件通信

• 1, 父传子
• 2，子传父
• 3，兄弟传值
• 4，跨组件传递数据

1，父传子

1，父组件提供要传递的state数据

2，给子组件标签添加属性，值为state中的数据

3，子组件中通过props接收父组件传递的数据

// 父组件
class Parent extends React.Component {
  render() {
    return (
      <div>父组件：<Child name="老王"/></div>
    )
  }
}
// 父组件也可以直接写要传递的数据
class Parent extends React.Component {
  state = {
    name: '老王'
  }
  render() {
    return (
      <div>父组件：{this.state.name}<Child name={this.state.name}/></div>
    )
  }
}

// 子组件
const Child = props => {
  return (
    <div>子组件接收到父组件传递过来的数据： {props.name}</div>
  )
}

2，子传父

利用回调函数：父组件提供回调函数，子组件调用，将要传递的数据作为回调函数的参数。同vue一样

// 父组件
class Parent extends React.Component {
  // 提供回调函数
  state = {
    msg: ''
  }
  getChildMsg = data => {
    this.setState({msg: data})
  }
  render() {
    return (
      <div>父组件接收到子组件传递过来的数据为：{this.state.msg}<Child getMsg={this.getChildMsg}/></div>
    )
  }
}

// 子组件
class Child extends React.Component {
  handleClick = () => {
    // 子组件调用父组件传递过来的回调函数
    this.props.getMsg('哈哈哈')
  }
  render() {
    return (
      <div>子组件：<button  onClick={this.handleClick}>点击给父组件传递数据</button></div>
    )
  }
}

兄弟通信

思想就是：状态提升

• 将共享的数据(状态)提升到最近的公共父组件，由父组件管理这个状态
• 公共父组件职责：1，提供共享状态 2，提供操作共享状态的方法
• 要通讯的子组件只需通过props接收状态或操作状态的方法

// 父组件
class Parent extends React.Component {
  // 父组件提供状态
  state = {
    message: '父组件的message'
  }
  // 提供修改状态的方法
  changeMsg = () => {
    this.setState({
      message: this.state.message + '哈哈哈哈哈'
    })
  }
  render() {
    return (
      <div>
        <Child1 msg={this.state.message}/>
        <Child2 getMsg={this.changeMsg}/>
      </div>
    )
  }
}

// 子组件1
const Child1 = props => {
  return <h1>子组件1: {props.msg}</h1>
}

// 子组件2
const Child2 = props => {
  return <h1>子组件2: <button onClick={() => props.getMsg()}>点击</button></h1>
}

4，跨组件传递数据 - Context

使用步骤：1,调用React.createContext()创建Provider(提供数据)和Consumer(消费数据)两个组件

const {Provider, Consumer} = React.createContext()

2，使用 Provider 组件作为父节点

<Provider>
  <div>
    <Child/>
  </div>
</Provider>

3，设置value属性，表示要传递的数据

<Provider value="传递的value值">

4, 调用Consumer组件接收数据

<Consumer>
  {data => <span>data参数表示接收到的数据-{data}</span>}
</Consumer>

示例：

class Grandfather extends React.Component{
  render() {
    return (
      <Provider value="祖父组件的value值">
        <div>
          祖父组件：<Parent/>
        </div>
      </Provider>
    )
  }
}

const Parent = props => {
  return (
    <div>
      父组件：<Son/>
    </div>
  )
}

const Son = props => {
  return (
    <div>
      儿子组件：<Grandson/>
    </div>
  )
}

const Grandson = props => {
  return (
    // <Consumer>
    //   {data => (<div>
    //     孙子组件 === 接收到来自祖父传递的数据：{data}
    //   </div>)}
    // </Consumer>
    <div>
      孙子组件====接收到来自祖父传递来的数据
      <Consumer>
        {data => <span style={{color: 'red'}}>为：{data}</span>}
      </Consumer>
    </div>
  )
}

image