关于react.js:React5React兄弟组件之间的通信

34次阅读

共计 4534 个字符,预计需要花费 12 分钟才能阅读完成。

前言

上一篇文章咱们通过一个 ToDoList 案例,零碎的解说了 React 父子组件之间的通信。本篇文章咱们仍然通过一个实用的案例来为大家解说 React 兄弟组件之间的通信。


一、兄弟组件之间的通信原理

React 我的项目中的两个兄弟组件若要传递数据,则首先须要先将数据从一个兄弟组件传递给他们的公共父组件,而后再由这个公共父组件将数据传递给另一个兄弟组件。数据传递的原理如下图所示。

咱们通过一个案例来阐明兄弟组件之间的通信形式。该案例是一个色彩调色板,页面中有三个滑竿,别离能够调整红色、绿色、蓝色的取值范畴(0-255),在调整任意滑竿的过程中,会主动显示最终生成的颜色代码,并将具体的色彩展现在一个 div 容器中。案例效果图如下图所示。

该案例为了实现兄弟组件之间的数据传递,咱们将其划分为三个组件。

  • 父组件:Color,用于调用两个子组件,并且显示最终的颜色代码。
  • 子组件 1:ColorBoard,用于显示色彩拾取器中展现具体色彩的 div 容器。
  • 子组件 2:ColorSelector,用于实现调整色彩的三个滑竿。

本案例中,三个滑竿的取值决定了最终的颜色代码和色彩展现。所以初始化的数据位于组件 ColorSelector 中,当滑竿发生变化时,三个滑竿的取值都要传递给父组件,父组件将其转换为颜色代码,再传递给子组件 ColorBoard,子组件将其作用在用于展现色彩的 div 的背景色彩属性上。组件之间数据的传递方向如下图所示。

二、三个组件的根本构造

咱们将组件划分好之后,先依照效果图将各个组件的元素地位书写好。

1、子组件 ColorSelector 的根本构造

class ColorSelector extends Component{constructor(props){super(props);
    this.state={colors:[255,255,255]
    }
  }
  render(){
    return (
      <Fragment>
        {this.state.colors.map((item,index)=>{return <input type="range" key={index} min={0} max={255} />
          })
        }
      </Fragment>
    )
  }
} 

为了可能获取三个滑竿的最终数值,咱们在 state 区设置了一个名为 colors 的数据,该数据是一个数组,共有三个数组元素,别离用来示意三个滑竿的最终数值。

滑竿也属于表单元数,和上一篇文章中应用文本框的办法是一样的。为滑竿增加 value 属性设置默认值,绑定 onChange 事件获取用户交互数据,在 onChange 事件中应用 event.target.value 失去最终的后果。所以上述代码中滑竿的局部最终变为下列格局。

return <input type="range" key={index} min={0} max={255} value={item} onChange={()=>this.colorChange(event,index)} /> 

2、子组件 ColorBoard 的根本构造

class ColorBoard extends Component{render(){
    return (
      <Fragment>
        <div className="board"></div>
      </Fragment>
    )
  }
} 

ColorBoard 组件只具备一个 div 容器,最终会接管父组件 Color 传递过去的颜色代码并通过 style 属性扭转背景色彩。

3、父组件 Color 的根本构造

class Color extends Component{constructor(props) {super(props);
    this.state={color:'#FFFFFF'}
  }
  render(){
    return (
      <Fragment>
        <ColorBoard />
        <div> 颜色代码:{this.state.color}</div>
        <ColorSelector />
      </Fragment>
    )
  }
} 

父组件为了承受子组件 ColorSelector 传递过去的数组并最终转换为颜色代码,在其 state 区设置了一个名为 color 的数据。

三、ColorSelector 向 Color 传递数据

因为滑竿在子组件 ColorSelector 中,所以咱们要先进行子组件向父组件的数据传递。这时父组件要在调用子组件时设置一个自定义事件,并在子组件中滑竿的 onChange 事件中调用这个自定义事件。

父组件在调用 ColorSelector 子组件时设置的自定义事件如下所示。

<ColorSelector onSelect={this.colorSelect.bind(this)}/> 

子组件 ColorSelector 的滑竿 onChange 事件如下所示。

colorChange(event,index){const {onSelect}=this.props;
  let colors=[...this.state.colors];
  colors[index]=parseInt(event.target.value);
  this.setState({colors});
  onSelect(this.state.colors);
} 

在该段代码中,首先把记录三个滑竿数据的数组 colors 解构为 colors 变量,并通过 event.target.value 获取索引值为 index 的滑竿的最终数据,通过索引值扭转变量 colors 的数组元素取值,并最终将变量 colors 再复制给 state 数据 colors。最初调用父组件的 onSelect 事件,并将 state 区的 colors 数组传给父组件的 onSelect 事件。

父组件中自定义事件 onSelect 触发时执行的函数如下所示。

colorSelect(colors){
  let temp='#' + colors.map(item=>{return item>15?item.toString(16):'0'+item.toString(16);
  }).join('');
  this.setState({color:temp.toUpperCase()
  })
} 

父组件的 onSelect 事件接管到子组件 ColorSelector 传递的数组,将其遍历并将每个数组元素转换为 16 进制,最终变为示意色彩色代码的字符串。最初将这个字符串全副转换为大写,并赋值给父组件 state 区的 color 数据,这样既能够用于传递给子组件 ColorBoard,也能够用于在页面上显示颜色代码。

四、Color 向 ColorBoard 传递数据

接下来,父组件应该将接管到的颜色代码 color 传递给另一个子组件 ColorBoard 了,以用来在 div 容器中显示背景色彩。这时,父组件在调用子组件 ColorBoard 时,应该为其设置一个自定义属性,用来传递颜色代码。代码如下所示。

<ColorBoard color={this.state.color}/> 

子组件 ColorBoard 应该获取父组件传递的颜色代码并通过 style 属性扭转 div 容器的背景色彩。代码如下所示。

const {color}=this.props;
return (
  <Fragment>
    <div className="board" style={{backgroundColor:color}}></div>
  </Fragment>
) 

至此,三个滑竿的数据残缺的从子组件 ColorSelector 中传递给了另一个子组件 ColorBoard,在父组件直达的过程中,将 ColorSelector 传来的数组转换为颜色代码传给 ColorBoard。兄弟组件之间地通信顺利完成。

五、我的项目残缺代码

const {Component,Fragment} = React;
/* 子组件 ColorBoard*/
class ColorBoard extends Component{render(){const {color}=this.props;
    return (
      <Fragment>
        <div className="board" style={{backgroundColor:color}}></div>
      </Fragment>
    )
  }
}
/* 子组件 ColorSelector*/
class ColorSelector extends Component{constructor(props){super(props);
    this.state={colors:[255,255,255]
    }
  }
  colorChange(event,index){const {onSelect}=this.props;
    let colors=[...this.state.colors];
    colors[index]=parseInt(event.target.value);
    this.setState({colors});
    onSelect(this.state.colors);
  }
  render(){
    return (
      <Fragment>
        {this.state.colors.map((item,index)=>{return <input type="range" key={index} min={0} max={255} value={item} onChange={()=>this.colorChange(event,index)} />
          })
        }
      </Fragment>
    )
  }
}
/* 父组件 Color*/
class Color extends Component{constructor(props) {super(props);
      this.state={color:'#FFFFFF'}
  }
  colorSelect(colors){
    let temp='#' + colors.map(item=>{return item>15?item.toString(16):'0'+item.toString(16);
    }).join('');
    this.setState({color:temp.toUpperCase()
    })
  }
  render(){
    return (
      <Fragment>
        <ColorBoard color={this.state.color}/>
        <div> 颜色代码:{this.state.color}</div>
        <ColorSelector onSelect={this.colorSelect.bind(this)}/>
      </Fragment>
    )
  }
}

ReactDOM.render(
    <Color></Color>,
    document.getElementById('app')
); 

总结

本文是 React 系列教程的第五篇文章,次要为大家解说了 React 兄弟组件之间的通信形式。实质是仍然是父子组件之间的通信。今天会为大家零碎的解说 React 中受控表单元素的应用办法。

对于作者

小海前端,具备 18 年 Web 我的项目开发和前后台培训教训,在前端畛域著有较为零碎的培训教材,对 Vue.js、微信小程序开发、uniApp、React 等全栈开发畛域都有较为深的造诣。入住 Segmentfault,心愿可能更多的结识 Web 开发畛域的同仁,将 Web 开发鼎力的进行遍及。同时也违心与大家进行深刻的技术研究和商业单干。

正文完
 0