React 父子组件和非父子组件传值

零、this.props

可以接收到 外界的传值 和 此组件标签内部自定义的方法

例:

<one vals={message} sendVal={this.handleReverse.bind(this)}></one>

此时在子组件中打印this.props

this.props = {

vals : ‘**‘,

sendVal : fn

}

由此我们可以进行父子组件之间传值

一、父传子

在子组件标签中用自定义属性进行传递,接收的时候通过this.props进行接收

/* 父组件【自定义属性为 val 传的值为message】 */

1 <Fragment>
2     <one val={message}></one>
3 </Fragment>

/* 子组件【this.props对象中会出现 自定义属性,可以通过this.props.<属性名> 获取传值 】 */

1 render(){
2     let {val} = this.props;
3     return (
4         <Fragment>
5             <div>接收来自父组件的传值:{val}</div>
6         </Fragment>
7     )
8 }      

二、子传父

在子组件标签内部用自定义属性定义一个方法传递给子组件 子组件调用这个方法传递参数

/* 父组件 */

 1 render(){
 2     return (
 3         <Fragment>
 4             <one send={this.handleRevese.bind(this)}></one>
 5         </Fragment>
 6     )
 7 }
 8
 9 handleRevese(params){
10     console.log(‘来自子组件的传值‘ + params);
11 }    

/* 子组件 */

 1 render(){
 2     return (
 3         <Fragment>
 4             <button onClick={this.handleSend.bind(this)}>向父组件传值</button>
 5         </Fragment>
 6     )
 7 }
 8
 9 handleSend(){
10     this.props.send(this.state.mess);
11 }

三、非父子【使用自己封装的$on $emit $off】

One组件

 1 render(){
 2     return (
 3         <div>
 4             <button onClick={this.handleTwo.bind(this)}>发送给Two组件</button>
 5         </div>
 6     )
 7 }
 8
 9 handleTwo(){
10     Observer.$emit("handle",this.state.oneVal);
11 }       

Two组件

 1 constructor(){
 2     super();
 3     this.state = {
 4         oneVal:""
 5     }
 6     Observer.$on("handle",(val)=>{
 7         this.setState({
 8             oneVal:val
 9         })
10     })
11 }
12
13 render(){
14     let {oneVal} = this.state;
15     return (
16         <div>接收到one组件的值为:{oneVal}</div>
17     )
18 }   

原文地址:https://www.cnblogs.com/jokehl/p/9998163.html

时间: 2024-10-07 12:13:29

React 父子组件和非父子组件传值的相关文章

Vue父子组件及非父子组件如何通信

1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: 子组件通过props来接收数据: 方式1: 方式2 : 方式3: 这样呢,就实现了父组件向子组件传递数据. 2.子组件与父组件通信 那么,如果子组件想要改变数据呢?这在vue中是不允许的,因为vue只允许单向数据传递,这时候我们可以通过触发事件来通知父组件改变数据,从而达到改变子组件数据的目的. 父组件: 3.非父子组件通信 如果2个组件不是父子组件那么如何通信呢?这时可以通过eventHub来实现

浅谈react受控组件与非受控组件

最近在使用蚂蚁金服出品的一条基于react的ant-design UI组件时遇到一个问题,编辑页面时input输入框会展示保存前的数据,但是是用defaultValue就是不起作用,输入框始终为空值而不是具体的传入的值.具体编辑页面中文本框相关的代码如下:         ... //render方法上面的内容省略  <FormItem       label="问题描述:"       hasFeedback      {...props.formItemLayout}  &g

react 表单(受控组件和非受控组件)

我们知道表单元素与其他的普通DOM元素来说是不一样的,它们保存了自己的一些状态. 我们主要说的就是表单元素中的受控组件和非受控组件. 受控组件就是这个组件的状态是我们(react)控制的,这个组件的行为是完全受到我们控制的,所以叫做受控组件,比如: 1 class NameForm extends React.Component { 2 constructor(props) { 3 super(props); 4 this.state = {value: ''}; 5 6 this.handle

Vue父子组件和非父子组件传值问题

父组件跟子组件之间的传值(具体参考lonzhubb商城) 1.父组件传值给子组件形式,ifshop是要传的对象,右边ifshop代表要传的这个对象的数据 <v-select  :ifshop="ifshop"  :clickType="clickType" @close="close" @addShop="sureAddShop"></v-select> 2.子组件接收父组件的数据用props prop

vue2.0父子组件以及非父子组件如何通信

1.父组件 >>> 子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg"></child> //这里必须要用 - 代替驼峰 </parent> data(){ return { msg: [1,2,3] }; } 子组件通过props来接收数据: 方式1: props: ['childMsg'] 方式2 : props: { chi

Vue_(组件通讯)非父子关系组件通信

Vue单项数据流 传送门 Vue中不同的组件,即使不存在父子关系也可以相互通信,我们称为非父子关系通信 我们需要借助一个空Vue实例,在不同的组件中,使用相同的Vue实例来发送/监听事件,达到数据通信的目的 Learn   一.单项数据流 目录结构 [每个demo下方都存有html源码] 一.单项数据流 定义组件A和组件B,组件A和组件B同级关系,当点击<template-a>的button控件时,调用sendData函数,将template-a中的data数据发向template-b <

vue的父子组件以及非父子组件之间的通信方式

Vue组件通信 父传子  prop 自定义属性,将父亲的数据传给儿子 1. 在组件标签上使用自定属性 2. 在组件内部通过props来接收自定义属性 3. 子组件接收后既可以在组件里直接使用,不过只能用不能改 <wiz_code_mirror> //父组件 <body>  <div id='app1'>      <!-- 在tp1组件标签上使用 xixi自定义属性 -->    <tp1 :xixi='change'></tp1>

React 受控组件和非受控组件

需求用户名自动获取 onChange用户状态发生改变 就获取值 就是时时获取值 使用onChange 点击按钮 获取密码 只要绑定了点击事件 就可以获取值 通过 let usercont=event.target.value;//获取用户的值 ref获取值的另外一种用法 密码: <input type="password" ref={this.Myrefs}></input> Myrefs = React.createRef();//创建一个承装ref的容器 M

react函数式组件(非路由组件)实现路由跳转

个人理解: <Route exact path="/Home" component={Home}/> 1.路由组件:只有包裹在Route组件里的才能使用`this.props.location`, 2.非路由组件:假如有个需求,是面包屑或者导航组件里需要拿到`this.props.location`(导航组件或者面包屑一般不会包裹在`Route`里吧),那么直接这么写显然就不行了. 这个时候`withRouter`修饰一下,就可以这么写了. useHistory impor