交流群:462197261站长百科站长论坛热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
点击这里给我发消息
  • 当前位置:
  • react 组件传值的三种方法

    整理 react 组件传值 三种方式

    父组件向子组件传值(通过props传值)

    子组件:

      class Children extends Component{
        constructor(props){
          super(props);
        }
        render(){
          return(
            <div>这是:{this.props.name}</div> // 这是 父向子
          )
        }
      }
    

    父组件:

      class App extends React.Component{
        render(){
          return(
            <div>
              <Children name="父向子"/>
            </div>
          )
        }
      }
    

    父组件向子组件传值(回调函数)

    子组件

      class Children extends Component{
        constructor(props){
          super(props);
        }
        handerClick(){
          this.props.changeColor('skyblue') // 执行父组件的changeColor 并传参 必须和父组件中的函数一模一样
        }
        render(){
          return(
            <div>
              <div>父组件的背景色{this.props.bgcolor}</div> // 子组件接收父组件传过来的值 bgcolor
              <button onClick={(e)=>{this.handerClick(e)}}>改变父组件背景</button> // 子组件执行函数
            </div>
          )
        }
      }
    

    父组件

      class Father extends Component{
        constructor(props){
          super(props)
          this.state = {
            bgcolor:'pink'
          }
        }
        bgChange(color){
          this.setState({
            bgcolor:color
          })
        }
        render(props){
          <div style={{background:this.state.bgcolor}}>
                  // 给子组件传递的值 color 
            <Children bgcolor={this.state.bgcolor} changeColor={(color)=>{this.bgChange(color)}} /> 
                              // changeColor 子组件的参数=color 当做形参
          </div>
        }
      }
    

    兄弟组件传值(子传给父,父再传给另一个子)

    子组件1

      class Children1 extends Component{
        constructor(props){
          super(props);
        }
        handerClick(){
          this.props.changeChild2Color('skyblue') 
          // 改变兄弟组件的颜色 把changeChild2Color的参数传给父
        }
        render(){
          return(
            <div>
              <div>children1</div>
              <button onClick={(e)=>{this.handerClick(e)}}>改变children2背景</button>
            </div>
          )
        }
      }
    

    子组件2

      class Children2 extends Component{
        constructor(props){
          super(props);
        }
        render(){
          return(
            <div style={{background:this.props.bgcolor}}>
            // 从父元素获取自己的背景色
              <div>children2 背景色 {this.props.bgcolor}</div>
              // children2 背景色 skyblue
            </div>
          )
        }
      }  
    

    父组件

    class Father extends Component{
      constructor(props){
        super(props)
        this.state = {
          child2bgcolor:'pink'
        }
      }
      onchild2bgChange(color){
        this.setState({
          child2bgcolor:color
        })
      }
      render(props){
        <div>
          <Children1 changeChild2Color={(color)=>{this.onchild2bgChange(color)}} />
          <Children2 bgcolor={this.state.child2bgcolor} />
        </div>
      }
    }
    

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持北冥有鱼。

    您可能感兴趣的文章:

    • Vue和React组件之间的传值方式详解
    • React父子组件间的传值的方法
    • React 子组件向父组件传值的方法
    • react-router实现跳转传值的方法示例
    • react写一个select组件的实现代码
    • react的滑动图片验证码组件的示例代码
    • React传值 组件传值 之间的关系详解

    广而告之:
    热门推荐:
    HTML网页超链接标记

    HTML网页超链接标记学习教程 链接标记的属性 链接是网页页面中最重要的元素之一,是一个网站的灵魂。一个网站是由多个页面组成的,页面之间依靠链接确定相互的导航关系。每一个网页都有独一无二的地址,在英文中被称作url(Uniform Resource Locator:通用资源标示符)。在地址栏···

    利用CSS中linear制作复杂的边框效果

    网上看到一种利用linear-gradient属性制作绚丽边框效果的方法。首先给出代码,大家可以在自己的电脑中查看效果: XML/HTML Code复制内容到剪贴板 <!DOCTYPE html>            <html lang="en" ···

    pycharm下pyqt4安装及环境配置的教程

    一、安装 首先根据自己的python版本下载pyqt4离线包,现在连接:https://www.lfd.uci.edu/~gohlke/pythonlibs/#pyqt4 比如我地python版本是python3.5.2,我选择PyQt4‑4.11.4‑cp35‑cp35m‑win_amd64.whl 在whl文件路径下,使用pip指令安装 pip install···

    jquery ajax 简单范例(界面+后台)

    界面: 复制代码 代码如下: <script> $(document).ready(function () { $("#b01").click(function () { htmlobj = $.ajax({ url: "/Content/upFile/测试.txt", async: false }); $("#div01").html(htmlobj.responseText); }); }); $(document).ready(function () {···

    element-ui组件table实现自定义筛选功能的示例代码

    element-ui默认的table组件支持的表头筛选(过滤)是比较简单的,只支持数组的方式,单选或多选的形式,但有时候我们喜欢支持输入框形式(其实感觉有点扯淡,一般列表页上面都有搜索条件)。 注意:里面用到的jsx语法,可能需要安装一些插件。 准备工作: 1.安装babel-plugin-···

    详解ES6系列之私有变量的实现

    前言 在阅读 《ECMAScript 6 入门》的时候,零散的看到有私有变量的实现,所以在此总结一篇。 1. 约定 实现 class Example { constructor() { this._private = 'private'; } getName() { return this._private } } var ex = new Example(); console.log(···

    addEventListener 的用法示例介绍

    (要注意的是div必须放到js前面才行) 一般情况下,如果给一个dom对象绑定同一个事件,只有最后一个会生效,比如: 复制代码 代码如下: document.getElementById("btn").onclick = method1; document.getElementById("btn").onclick = method2; document.getElementById("···

    ThinkPHP3.1新特性之动态设置自动完成及自动验证示例代码

    在ThinkPHP3.1版本之前,如果需要设置自动验证或者自动完成,必须定义在模型中,或者通过setProperty方法动态设置属性来完成,但是这样做的缺点是不太方便动态改变和调整 。 ThinkPHP3.1版本在模型类中增加auto和validate两个连贯操作,用于动态设置自动完成和自动验证规则,现···

    vue使用watch 观察路由变化,重新获取内容

    问题背景: 点击用户头像 => 进入用户个人中心,在用户个人中心里点击其他用户的头像,我希望显示被点击用户的个人中心,但只看到了路由参数在发生变化,页面内容并没有更新。如图: 页面代码如下: <script> export default { data() { return { ···