这段时间一直在使用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. 让自己的软件实现拖拽打开文件(覆盖WM_DROPFILES,使用DragQueryFile,DragFinish API函数)

    作者: 帅宏军 //声明 protected    procedure WMDROPFILES(var Msg : TMessage); message WM_DROPFILES; --------- ...

  2. 使用 Google Guava 美化你的 Java 代码:1~4 【转】

    文章转载自:http://my.oschina.net/leejun2005/blog/172328 1.使用Google Collections,Guava,static imports编写漂亮代码 ...

  3. 使用Perl分割文件

    使用Perl分割文件 特性 使用换行作为分界 忽略注释行# 分割存入新指定的文件中 待分割的文件test.lst wwdg/prescaler syscfg/test1 syscfg/test2 ua ...

  4. 一个神奇的控件——Android CoordinatorLayout与Behavior使用指南

    CoordinatorLayout是support.design包中的控件,它可以说是Design库中最重要的控件. 本文通过模仿知乎介绍了自定义Behavior,通过模仿百度地图介绍了BottomS ...

  5. php实现 统计每个月兔子的数量

    php实现 统计每个月兔子的数量 一.总结 一句话总结:想清楚再动,怎么可能出错嘛. 二.统计每个月兔子的数量 题目描述 有一只兔子,从出生后第3个月起每个月都生一只兔子,小兔子长到第三个月后每个月又 ...

  6. golang 操作 Redis & Mysql & RabbitMQ

    golang 操作 Redis & Mysql & RabbitMQ Reids 安装导入 go get github.com/garyburd/redigo/redis import ...

  7. 【b602】金明的预算方案

    Time Limit: 1 second Memory Limit: 50 MB [问题描述] 金明今天很开心,家里购置的新房就要领钥匙了,新房里有一间金明自己专用的很宽敞的房间.更让他高兴的是,妈妈 ...

  8. 【codeforces 755C】PolandBall and Forest

    time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...

  9. 数据结构与算法——常用数据结构及其Java实现

    前言 仿佛一下子,2017年就快过去一半了,研一马上就要成为过去式了,我打算抓住研一的尾巴,好好梳理一下数据结构与算法,毕竟这些基础知识是很重要的嘛.所以准备在这里搞一个系列的文章,以期透彻. 本系列 ...

  10. [Ramda] Eliminate Function Arguments (Point-Free Style) with Ramda's Converge

    When doing comparisons inside of functions, you end of relying heavily on the argument passed into t ...