这段时间一直在使用react,由于这react是单向数据绑定,总感觉有点不适用,毕竟之前一直都在使用angular,但学习还是要继续,做了一个迭代的项目,都差点忘记要总结一下这个react了,现在可以写点东西了。(react 新手,仅仅参考)

1.react一开始我更理解为是一个各种代码片段,由于之前接触了一段时间meteor,感觉有点相似。在使用之前都要在app.js中将一总的父组件通过import导入,另外在route中的path中写入链接

例如:import createHistory from 'history/createHashHistory';

<Route path="/mediahome" component={MediaHome}/>

2.父组件页面中,使用

class ShoppingCar extends React.Component {
constructor() {
super();
this.state ={
myCar : []
};
}
componentDidMount() {
//进行渲染
} }

说明:使用class并且继承,说明这种方式里面都是一种对象的形式,在调用的时候也要使用这种点的形式

constructor首先设置属性,可以理解为js中的var ;先设置一个变量;

componentDidMount 在这里可以请求一些数据,请求结束之后在渲染页面

如果父组件要传递参数给子组件可以在子组件的路由中加入 ,然后在子组件中用this.props获取,同理,从父组件向子组件传递函数也是如此,在子组件使用this.props调用函数,将子组件的值返回到父组件中调用更新。

react 父组件向子组件传递函数的更多相关文章

  1. React中父组件与子组件之间的数据传递和标准化的思考

    React中父组件与子组件之间的数据传递的的实现大家都可以轻易做到,但对比很多人的实现方法,总是会有或多或少的差异.在一个团队中,这种实现的差异体现了每个人各自的理解的不同,但是反过来思考,一个团队用 ...

  2. react 父组件调用子组件方法

    import React from 'react'import '../page1/header.css'import { Table } from 'antd'import Child from ' ...

  3. React 父组件触发子组件事件

    Parent组件 import React from "react"; import Child from "./component/Child"; class ...

  4. React Hook父组件获取子组件的数据/函数

    我们知道在react中,常用props实现子组件数据到父组件的传递,但是父组件调用子组件的功能却不常用.文档上说ref其实不是最佳的选择,但是想着偷懒不学redux,在网上找了很多教程,要不就是hoo ...

  5. react学习-react父组件给子组件传值与设置传值类型以及是否必传参数

    react 父组件给子组件传参时,父组件直接在引入的子组件内写入要传递的参数即可 <HeaderComponent title={"传递的参数"}></Heade ...

  6. 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法

    一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...

  7. React 父组件调用子组件的方法

    父组件调用子组件的方法 React v16.3.0 及以后版本使用 import React, {Component} from 'react'; export default class Paren ...

  8. react中直接调用子组件的方法(非props方式)

    我们都知道在 react中,若要在父组件调用子组件的方法,通常我们会采用在父组件定义一个方法,作为props转给子组件,然后执行该方法,可以获取到子组件传回的参数以得到我们的目的. 显而易见,这个执行 ...

  9. vue 父组件向子组件传递事件/调用事件

    方法一:子组件监听父组件发送的方法 方法二:父组件调用子组件方法 子组件: export default { mounted: function () { this.$nextTick(functio ...

随机推荐

  1. Source Insight 3.50.0065使用详解

    转自calvinlee1984 Subject:Source Insight3.50.0065使用详解 Date:     21-Oct-2011 By:         Calvinlee1984@ ...

  2. 关于Altium Designer中的搜索图纸上的元件

    一开始以为Altium Designer搜索完成的pcb上的元件用ctrl+f 但是错了,应该是j,c

  3. Nginx 虚拟主机及正向代理设置

    添加虚拟主机 # vim /usr/local/nginx-1.9.0/conf/vhost/proxy.conf  server { resolver 8.8.8.8; listen ; locat ...

  4. 10.5 android输入系统_Reader线程_使用EventHub读取事件和核心类及配置文件_实验_分析

    4. Reader线程_使用EventHub读取事件 使用inotify监测/dev/input下文件的创建和删除 使用epoll监测有无数据上报 细节: a.fd1 = inotify_init(& ...

  5. 【习题 5-8 UVA - 230】Borrowers

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 用map+set写个模拟就好. 3个区域 书架.桌子.别人的手上. 其中前两个区域的书都能借出去. [代码] #include &l ...

  6. 账号被盗!请勿在CSDN,回复不论什么消息。

    账号被盗!请勿在CSDN,回复不论什么消息.

  7. ArcEngine判断要素(feature)是否为multipart feature及分解(炸开)代码

    转自原文 ArcEngine判断要素(feature)是否为multipart feature及分解(炸开)代码 #region 校验合法性 ArrayList pFeatureArray = nul ...

  8. Windows共享上网的做法

    作者:朱金灿 来源:http://blog.csdn.net/clever101 现在有这样一个网络应用场景:A机器是一个PC台式机,处在两个网络中,一个是处在192.168.30.1到192.168 ...

  9. mysqldump备份脚本

    #!/bin/bash # 10 23 * * * /bin/bash /data/script/backup_mysqldump.sh BDATE=`date +%Y%m%d%H%M%S`BPATH ...

  10. ios开发之手势处理 之手势识别一

    #import "ViewController.h" @interface ViewController ()<UIGestureRecognizerDelegate> ...