react组件的数据传递

在react中,为了解决html标签构建应用的不足,将公共的功能单独抽离成一个文件作为一个组件,在使用的地方按需引入,既然是组件彼此调用,就会涉及到父子组件的通信,下面主要来总结简单的组件通信。

1,项目准备

在开始组件通信前,先在components中新建两个文件,News.js和Header.js,并在News.js中引用Header.js,然后在App.js中引入News.js。

App.js

Header.js

News.js

2,父组件给子组件传值

要在子组件中获取父组件传递的值,只需要两步就可以了:

  1. 在调用子组件的时候定义一个属性 <Header msg=‘首页‘></Header>
  2. 子组件里面 this.props.msg

根据这两步,我们分别修改Header.js和News.js

Header.js

News.js

3,在子组件中调用父组件的方法

在子组件中使用父组件的方法,需要分成3步:

  1. 在父组件中定义方法;
  2. 在调用子组件的时候绑定该方法
  3. 在子组件中使用该方法。

我们将上面的代码稍作调整,在父组件Header.js中定义一个执行打印语句的方法

然后在调用子组件的时候,绑定这个方法

最后,在子组件News.js中的一个按钮上添加点击事件,通过点击事件调用该方法。

4,在父组件中获取子组件的数据和方法

想要在父组件中获取子组件的数据和方法,可以先在父组件中获取整个子组件实例,继而再获取实例和方法就可以了。

首先,在子组件Header.js中定义相关的方法和数据:

然后在父组件中调用子组件的时候指定ref的值 <Header ref=‘header‘></Header>,并通过this.refs.header 获取整个子组件实例

当我们执行父组件的点击事件时,就可以使用子组件的方法和数据了。

完整的父子组件代码如下:

Header.js

import React,{Component} from ‘react‘
class Header extends Component{
    constructor(props){
        super(props);
        this.state={
            title:"我是子组件的数据"
        }
    }
    childFun=()=>{
        console.log("我是子组件的方法");
        console.log(this.state.title)
    }
    render(){
        return(
            <div>
               <h3>我是子组件</h3>
            </div>
        )
    }

}
export default Header;

News.js

import React,{Component} from ‘react‘
import Header from ‘./Header‘
class News extends Component{
    constructor(props){
        super(props);
        this.state={
            title:‘我是父组件‘
        }
    }
    run=()=>{
        console.log(‘我是父组件方法‘)
    }
    getHeader=()=>{
        this.refs.header.childFun();
        this.setState({
            title:this.refs.header.state.title
        })
    }
    render(){
        return(
            <div>
                <h2>我是News.js,是一个父组件</h2>
                <Header ref=‘header‘/>
                <div>{this.state.title}</div>
                <button onClick={this.getHeader}>执行子组件的方法</button>
            </div>
        )
    }

}
export default News;

5,在子组件中获取整个父组件

上面,通过在父组件中获取整个子组件的实例,从而获取了组件的数据和方法,其实,在子组件中,也可以获取整个父组件的实例,从而获取父组件的数据和方法。

首要,父组件中定义数据和方法,并在调用子组件的时候,定义一个属性,传入this,即当前组件。

然后在子组件中,可以直接使用这些数据和方法

当然了,这种情况下也可以很方便的将子组件的数据传递到父组件了,而不在需要通过在父组件中获取整个子组件了。

原文地址:https://www.cnblogs.com/yuyujuan/p/10125283.html

时间: 2024-11-05 20:44:24

react组件的数据传递的相关文章

React和Vue组件间数据传递demo

一.React (一)父组件向子组件传数据 简单的向下传递参数 /* Parent */ class App extends Component { render() { return ( <div className="App"> <Child msg="来自父元素的问候"/> </div> ); } } /* Child */ class Child extends Component { render() { return

vue.js学习笔记(Vuejs——组件——props数据传递)

①组件实例的作用域: 是孤立的,简单的来说,组件和组件之间,即使有同名属性,值也不共享. <div id="app"> <add></add> <del></del> </div> <script> var vm = new Vue({ el: '#app', components: { "add": { template: "<button>btn:{{btn

vuejs父子组件的数据传递

在vue中,父组件往子组件传递参数都是通过属性的形式来传递的 <div id='root'> <counter :count = '1'></counter> <counter :count = '2'></counter> </div> <script> var counter = { props:['count'], template:'<div>{{count}}</div>' } var v

React组件实现越级传递属性

如果有这样一个结构:三级嵌套,分别是:一级父组件.二级子组件.三级孙子组件,且前者包含后者,结构如图: 如果把一个属性,比如color,从一级传递给三级,一般做法是使用props逐一向下传递,代码如下: // 一级父组件 class Level1 extends React.Component{ render(){ return <Level2 color='red'/> } } // 二级子组件 class Level2 extends React.Component{ render(){

React 组件传值 父传递儿子

10===> 传递参数 import React from "react" //一定要导入React // 函数类型去创建组件 export function Web1(props){ return <div> 我是以函数的形式创建的组件 <p> {props.name}</p> </div> } // 以类的形式创建组件 这一种传递参数要使用 this 它是挂载到实例上的 export class Web2 extends Rea

Vue2.0组件间数据传递

Vue1.0组件间传递 使用$on()监听事件: 使用$emit()在它上面触发事件: 使用$dispatch()派发事件,事件沿着父链冒泡: 使用$broadcast()广播事件,事件向下传导给所有的后代 Vue2.0后$dispatch(),$broadcast()被弃用,见https://cn.vuejs.org/v2/guide/migration.html#dispatch-和-broadcast-替换 1,父组件向子组件传递场景:Father上一个输入框,根据输入传递到Child组件

Vuejs——组件——props数据传递

父组件向子组件传递: wapper.vue父组件 <template> <div> <input type="text" v-model="msg"> <br> <!-- 将子控件属性inputValue与父组件msg属性绑定 --> <child :inputValue="msg"></child> </div> </template>

react组件渲染的一些想法

最近一直在思考一个问题,react的单向数据流面对深层次组件集合(redux connect方法返回的组件,即一项完整的功能)时,数据该如何传递???redux帮助我们解决了什么问题??? 我使用了redux+react,发现redux并没有解决react组件之间数据传递问题.只是把数据中心化与避免了父组件取子孙组件的数据时那繁琐的回调,却增加了三个麻烦的东西action.reducer.mapStateProps.复杂的处理流程:action里新增一条数据,reducer就需要增加一个对该数据

设计react组件

首先作为一个合格的开发者,不要只满足于编写出了可以运行的代码,而耍了解代码背 后的工作原理;不要只满足于自己编写的程序能够运行,还要让自己的代码可读而且易 于维护 . 这样才能开发出高质量的软件 . 易于维护组件的设计要素 作为软件设计的通则,组件的划分要满足高内聚(High Cohesion)和低耦合(Low Coupling)的原则 . 高内聚指的是把逻辑紧密相关的内容放在一个组件中 . 用户界面无外乎内容 . 交互 行为和样式 . 传统上,内容由 HTML 表示,交互行放在 JavaScr