这段时间一直在使用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. HDU2438 Turn the corner【三分法】【数学几何】

    Turn the corner Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  2. OVS中对于用户层和datapath层的多个通道利用epoll进行控制

    这里先临时记录下代码流程,有待完好. static int construct(struct ofproto *ofproto_) { struct ofproto_dpif *ofproto = o ...

  3. 以Spring整合EhCache为例从根本上了解Spring缓存这件事(转)

    前两节"Spring缓存抽象"和"基于注解驱动的缓存"是为了更加清晰的了解Spring缓存机制,整合任何一个缓存实现或者叫缓存供应商都应该了解并清楚前两节,如果 ...

  4. 移动web处理input输入框输入银行卡号四位一空格

    由于项目上有需求要求输入银行卡号四位一空格的需求,改过好几版发现都有bug,最后优化了一版看起来效果还行,发帖留存. 难点是从中间插入和删除处理光标问题. 首先需要用到获取光标和设置光标的方法. // ...

  5. JSON入门之二:org.json的基本用法 分类: C_OHTERS 2014-05-14 11:25 6001人阅读 评论(0) 收藏

    java中用于解释json的主流工具有org.json.json-lib与gson,本文介绍org.json的应用. 官方文档: http://www.json.org/java/ http://de ...

  6. 远离“精神乞丐”(IBM的前CEO郭士纳把员工分为四种类型)

    语音丨吴伯凡 乞丐与其说是一种身份, 不如说是一种精神状态, 习惯性索取且心安理得, 习惯性寻求安慰,习惯性抱怨, 与之截然对立的, 是“操之在我”(Proactive)的精神, 乞丐型员工是公司内部 ...

  7. http各种状态码具体解释

    1XX (暂时响应)   100(继续) 请求者应当继续提出请求.   101(切换协议)请求者已要求server切换协议,server已确认并准备切换 2XX(成功)    ·200(成功) ser ...

  8. [Compose] 18. Maintaining structure whilst asyncing

    We take our Promise.all() analogy further by using traversable on a Map(). Then we use two traversal ...

  9. 【BZOJ1426】收集邮票 概率DP 论文题 推公式题

    链接: #include <stdio.h> int main() { puts("转载请注明出处[辗转山河弋流歌 by 空灰冰魂]谢谢"); puts("网 ...

  10. 【转】A* A星 算法 C语言 实现代码

    http://blog.csdn.net/shanshanpt/article/details/8977512 关于A*算法,很早就想写点什么,可是貌似天天在忙活着什么,可事实又没有做什么,真是浮躁啊 ...