侧边栏壁纸
博主头像
woku博主等级

成功的路上并不拥挤

  • 累计撰写 50 篇文章
  • 累计创建 13 个标签
  • 累计收到 3 条评论

父子组件关系与状态提升

woku
2022-04-28 / 0 评论 / 0 点赞 / 176 阅读 / 1,859 字

组件数据独立

两个兄弟组件,每个组件都有自己独立的状态(唯一且独立)

import ReactDOM from 'react-dom'

const { Component } = require("react");

class Info extends Component {
  render() {
    return (
      <div>
        <p className="num-info">
          输入长度:{this.props.userName.length}
        </p>
      </div>
    )
  }
}
class UserNameInput extends Component {
  state = {
    userName: ''
  }
  changeUserName(e) {
    this.setState({
      userName: e.target.value
    })
  }
  render() {
    return (
      <div>
        <Info userName={this.state.userName}></Info>
        <input type="text" onChange={ e => this.changeUserName(e)} />
      </div>
    )
  }
}

class App extends Component {
  render() {
    return (
      <div>
          <UserNameInput />
          <UserNameInput />
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

类组件和函数组件相互是可以调用的,最终形成React元素是一样的。

状态提升

无父子关系的两个组件共享一个数据,并且同步数据变化,需要使用到状态提升
状态提升就是:

  1. 子组件的数据,提到父组件来保存与操作
  2. 通过props的方式传递到子组件

这种方式来实现兄弟组件数据共享

import ReactDOM from 'react-dom'

const { Component } = require("react");

class Info extends Component {
  render() {
    return (
      <div>
        <p className="num-info">
          输入长度:{this.props.userName.length}
        </p>
      </div>
    )
  }
}
class UserNameInput extends Component {
  changeUserName(e) {
    this.props.changeUserName(e)
  }
  render() {
    return (
      <div>
        <Info userName={this.props.userName}></Info>
        <input type="text" value={this.props.userName} onChange={ e => this.changeUserName(e)} />
      </div>
    )
  }
}

class App extends Component {
  state = {
    userName: ''
  }
  changeUserName(e) {
    this.setState({
      userName: e.target.value
    })
  }
  render() {
    return (
      <div>
          <UserNameInput userName={this.state.userName} changeUserName={this.changeUserName.bind(this)}/>
          <UserNameInput userName={this.state.userName} changeUserName={this.changeUserName.bind(this)}/>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

将状态userName提升到父组件App
通过props方法传递到UserNameInput
单向数据流:
数据流动: 父 -> 子 -> props向下传递
props只读数据,数据操作,交给父组件来完成(数据由父组件管理)

0

评论区