纵有疾风起
人生不言弃

React的组件传值有哪些

React中,数据的传递方式有以下几种

  1. 父传子 通过属性
  2. 子传父 通过事件
  3. 兄弟间传值 先传给父再传给兄弟
  4. 复杂关系 redux- 如何理解Redux

直接上代码理解

父传子
import React, { Component } from 'react';import ReactDOM from 'react-dom';class HomeTop extends Component {  render() {    return (      <h1>屋顶的颜色是 {this.props.acolor} 尺寸 {this.props.asize}</h1>    )  }}class Home extends Component {  state = {    color: "blue",    size: 100  }  render() {    return (      <div>        <HomeTop acolor={this.state.color} asize={this.state.size} ></HomeTop>      </div>    )  }}ReactDOM.render(<Home />, document.getElementById('root'))

需要注意的是,改成 函数式组件, props需要在子组件上通过形参的方式接收和使用,不再是通过this.props

import React, { Component } from 'react';import ReactDOM from 'react-dom';// 函数式组件 通过props形参来接收function HomeTop(props) {    return (        <h1>屋顶的颜色是 {props.acolor} 尺寸 {props.asize}</h1>    )}class Home extends Component {    state = {        color: "blue",        size: 100    }    render() {        return (            <div>                <HomeTop acolor={this.state.color} asize={this.state.size} ></HomeTop>            </div>        )    }}ReactDOM.render(<Home />, document.getElementById('root'))
子传父

通过触发事件的方式

  1. 父组件中 给子组件挂载一个自定义事件 onChangeColor
<GreenBtn onChangeColor={this.changeColor}></GreenBtn>
  1. 子组件自己触发事件
const GreenBtn = (props) => {  setInterval(() => {    // 触发 父组件上的自定义事件    props.onChangeColor("green");  }, 1000);  return (    <button >绿色</button>  )}

3.父组件上监听到了事件触发

import React, { Component } from 'react';import ReactDOM from 'react-dom';const GreenBtn = (props) => {  setInterval(() => {    // 触发 父组件上的自定义事件    props.onChangeColor("green");  }, 1000);  return (    <button >绿色</button>  )}class App extends Component {  state = {    color: "red"  }// 监听事件触发  changeColor = (color) => {    this.setState({      color    })  }  render() {    return (      <div style={{ backgroundColor: this.state.color }}>        <GreenBtn onChangeColor={this.changeColor}></GreenBtn>      </div>    )  }}ReactDOM.render(<App />, document.getElementById('root'))

完整代码

import React, { Component } from 'react';import ReactDOM from 'react-dom';const GreenBtn = (props) => {  setInterval(() => {    // 触发 父组件上的自定义事件    props.onChangeColor("green");  }, 1000);  return (    <button >绿色</button>  )}class App extends Component {  state = {    color: "red"  }// 监听事件触发  changeColor = (color) => {    this.setState({      color    })  }  render() {    return (      <div style={{ backgroundColor: this.state.color }}>        <GreenBtn onChangeColor={this.changeColor}></GreenBtn>      </div>    )  }}ReactDOM.render(<App />, document.getElementById('root'))
兄弟传值

思路是 组件A ->父组件->组件B

  1. 组件A通过触发事件,将数据传递个父组件
  2. 父组件通过属性props的方式将数据传递给子组件B

    React的组件传值有哪些插图
    兄弟传值.png

组件A

const GreenBtn = (props) => {  const handleClick = () => {    props.onChangeColor("green");  }  return (    <button style={{ color: props.color }} onClick={handleClick}>绿色</button>  )}

父组件

class App extends Component {  state = {    color: "red"  }  changeColor = (color) => {    this.setState({      color    })  }  render() {    return (      <div style={{ backgroundColor: this.state.color }}>        <GreenBtn onChangeColor={this.changeColor} color={this.state.color}  ></GreenBtn>        <RedBtn onChangeColor={this.changeColor} color={this.state.color} ></RedBtn>      </div>    )  }}

组件B

const RedBtn = (props) => {  const handleClick = () => {    props.onChangeColor("red");  }  return (    <button style={{ color: props.color }} onClick={handleClick}>红色</button>  )}

完整代码

import React, { Component } from 'react';import ReactDOM from 'react-dom';// 1 组件Aconst GreenBtn = (props) => {  const handleClick = () => {    props.onChangeColor("green");  }  return (    <button style={{ color: props.color }} onClick={handleClick}>绿色</button>  )}// 2 组件Bconst RedBtn = (props) => {  const handleClick = () => {    props.onChangeColor("red");  }  return (    <button style={{ color: props.color }} onClick={handleClick}>红色</button>  )}// 3 组件Cclass App extends Component {  state = {    color: "red"  }  changeColor = (color) => {    this.setState({      color    })  }  render() {    return (      <div style={{ backgroundColor: this.state.color }}>        <GreenBtn onChangeColor={this.changeColor} color={this.state.color}  ></GreenBtn>        <RedBtn onChangeColor={this.changeColor} color={this.state.color} ></RedBtn>      </div>    )  }}ReactDOM.render(<App />, document.getElementById('root'))

React的生命周期
React路由
闭包,原型链,继承,AJAX请求步骤等javaScript基础

文章转载于:https://www.jianshu.com/p/a5cf82023c67

原著是一个有趣的人,若有侵权,请通知删除

未经允许不得转载:起风网 » React的组件传值有哪些

分享到: 生成海报
avatar

评论 抢沙发

评论前必须登录!

立即登录   注册

切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活