React 多组件传值props和this

最新推荐文章于 2022-11-27 00:27:54 发布
最新推荐文章于 2022-11-27 00:27:54 发布
阅读量153 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/dianzan/p/7323525.html
版权 
<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <script src="js/react.js"></script>
  <script src="js/react-dom.js"></script>
  <script src="js/browser.min.js"></script>
</head>
<body>
<div id="example"></div>

<script type="text/babel">
  var AComponent = React.createClass({
    handleChange:function(){
        console.log(this.refs.inputTxt.value);
        this.props.funcSave(this.refs.inputTxt.value);
    },
    render:function(){
      return <input
       ref='inputTxt'
      onChange={this.handleChafuncSavenge}
      type='text'/>;
    }
  })

  var BComponent = React.createClass({
    handleClick:function(){
      console.log(this.props.funcGet());
    },
    render:function(){
      return <button onClick={this.handleClick}>
      {this.props.name}
      </button>;
    }
  })

  var MainComponent = React.createClass({
    result:0,
    save:function(value){
      console.log("in mainComponent value is "+value);
      this.result = value;
    },
    get:function(){
      return this.result;
    },
    render:function(){
      return <div>
      <AComponent funcSave={this.save}/>
      <BComponent funcGet={this.get} name='获取输入的值'/>
      </div>
    }
  })

  ReactDOM.render(
  <MainComponent/>,
  document.getElementById('example')
  )

</script>

</body>
</html>

转载于:https://www.cnblogs.com/dianzan/p/7323525.html

weixin_30772105
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React传值 组件传值 之间的关系详解
10-16
主要介绍了React传值 组件传值 之间的关系详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
【react全家桶学习】react中组件的props属性（详）
蜗牛~~
04-27 1603
（这种情况几乎不存在，在构造器中我们可以直接访问props而不是this.props，因此在实际开发中构造器就是能省略就省略，作用不大）应该加上花括号，react才会去读取花括号里面的东西（还记得vue里面吗，vue是在变量名加上冒号，代表读取变量，如。构造器是否接收props，是否传递给super，取决于：是否希望在构造器中通过this访问props。学过了vue的props属性，那react中的props属性如何使用呢？如果属性特别多，我们通过上面的方式传递十分繁琐，那如何批量传递呢？
react之间的组件传值
yangyiwj的博客
01-28 2779
js
前端-react组件之间传值（详解版）
Canace_Xyxjjcaw的博客
12-02 2510
1、使用ref完成父子组件通信（子传父=>父组件可以直接获取子组件中的数据；父传子=>父组件可以利用setState修改即给子组件传值）（只能在类组件中使用） （1）在父组件中导入createRef （2）在类组件中调用createRef （3）在子组件中自定义属性 （4）此时通过this.childRef.current就可以获取到子组件实例对象了 父组件利用this.childRef.current.setState({name:’aaa’})可..
React三大属性之一props
weixin_44664277的博客
08-10 915
组件实对象3大属性之一：props属性 1.每个组件对象都会有props（properties的简写）属性 2.组件标签的所有属性都保存在props中 3.内部读取某个属性值：this.props.propertyName 4.作用：通过标签属性从组件外 向组件内传递数据（只读 read only） 5.对props中的属性值进行类型限制和必要性限制 Person.propTypes = { ...
React中的组件传值
qq_54780032的博客
11-27 829
组件传值
react 组件传值的三种方法
10-16
主要介绍了react 组件传值的三种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
1-6、React组件中传值、添加事件和this丢失问题
01-20
文章系列（React框架基础） 1-1、React环境搭建，以及...（tips：本文为我们React框架基础系列最后一篇，下个系列将开启React组件化开发和项目实战） 1、组件中传值: 好的在上节5、React初探组件化开发，高内聚低耦合中
React 子组件向父组件传值的方法
08-29
本篇文章主要介绍了React 子组件向父组件传值的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
React组件间传值的方法有哪些？
油墨香^-^的博客
10-14 3395
React中组件之间的传值方法有很多，按照不同的组件间关系可以把组件传值的方法分为父子组件传值，跨级组件传值和非嵌套关系组件传值。父子组件常用的传值方法是当父组件给子组件传值时通过props，子组件向父组件传值通过回调函数来传值。而子组件向父组件传值需要通过回调函数触发，具体操作是父组件将一个函数作为props的属性传递给子组件，子组件通过this.props.xxx()调用父组件的函数，参数根据需要自己进行搭配即可。2 跨级组件传值：跨级的组件之间传值无非就是重复多个父子组件传值的过程。
react使用props在多个组件之间传递数据
何良语的博客
04-28 2145
有三个组件，分别是app、list、comment三个组件之间的关系是comment在list中使用，list在app中使用此时有数据需要从list传到comment，然后comment传回list，list又将comment传回的数据传给app代码如下：comment：list通过props传给comment两个参数，onDelete(func)  index(number)  然后commen...
React 三种组件间传值 简单易懂
热门推荐
Stephen Ling
08-12 1万+
React 组件之间的传值 React遵循单向传输原则,所以尽量不要使用双向传值，容易导致循环更新问题。同时应该在创造组件时思考组件是否需要状态管理，如果不需要使用函数式声明更佳！ 父向子传值 父向子传值起始比较简单，主要考虑向下传值是否会使得父组件中的状态过于繁杂，影响页面性能。 最简单的向子传值 父组件- Father Component import ...
关于React组件之间如何优雅地传值的探讨
weixin_30470857的博客
12-25 128
闲话不多说，开篇撸代码，你可以会看到类似如下的结构： import React, { Component } from 'react'; // 父组件 class Parent extends Component { constructor() { super(); this.state = { color: 'red' }; } r...
react中context跨组件传值（爷孙组件等多组件深度传值）
GreyCastle的博客
10-10 1203
前言： 在做项目中免不了进行组件深度传值，比如爷孙组件以及更深。这是时候其实有两个办法的。就是类似下面的结构 下面给大家介绍下方法 ①：传统的父子组件传值，一个传一个，这样虽然能实现但是很麻烦。 ②：就是react给我们提供了一个context，可以帮我们达到效果。context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性。接下来看怎样使用。 使用之前我们需要知道里面的几个东西 ①：childContextTypes(外层的组件使用的) ②：ge
React 组件之间传值
qq_40057138的博客
08-20 9911
一、父组件向子组件传值 父组件代码 import React, { Component } from 'react' import {HashRouter as Router, Route,Link} from 'react-router-dom' import Child from './Child' export default class Parent extends Component { constructor(){ super() this.state=
React 批量传递props
weixin_45780818的博客
10-26 574
承接上文 <script type="text/babel"> class Person extends React.Component { render() { console.log("this", this); const { name, sex, age } = this.props; return ( <ul> <li&g
react 的 传递属性 props 详解
北芒的博客
05-22 4625
什么是 props ？ 就是你在使用一个组件的时候希望这个组件可以复用，希望他里面的形态、所需的数据可以在我们调用的时候可以动态的传进去。 props 哪里来的？ 我们组件使用类创建的时候你需要继承 React.component，这个 props 就是继承React 来的 打印当前实例 console.log(this) 传递属性 <组件名 属性名=值 属性名2=值2 .. /> propName="字符" propName={js数据类型} 调用组件名的时候可以传递.
React父组件和子组件用props传值
nieji3057的博客
11-01 5134
转载地址：https://www.cnblogs.com/Scar007/p/8060334.html import React,{Component} from 'react'; import {render} from 'react-dom'; import './comprehensive.css' /* * 一个重要问题知识点： *可以看到这个CommentInput组件和Com...
react的render中的组件及参数传递时通过this.props实现对象的调取
dugushangliang的博客
05-25 4307
版权声明：转载请注明作者（独孤尚良dugushangliang）出处： https://blog.csdn.net/dugushangliang/article/details/90546878 react的render中<类名 参数={}/>如<Clock date={new Date()}/>是什么意思。 在看react的官方文档，看的有些稀里糊涂，又从菜鸟教...
react 传值 组件传值
最新发布
06-07
React 中的组件传值有两种方式：props 和 state。 1. Props 传值：父组件通过 props 将数据传递给子组件。子组件通过 props 接收父组件传递的数据。例如： ```javascript // 父组件 function Parent() { return ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值