这段时间一直在使用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. 为什么通过空指针(NULL)能够正确调用类的部分成员函数

    #include <iostream> using namespace std; class B { public: void foo() { cout << "B ...

  2. apache与IIS共用80端口冲突解决方法

    如果同一台电脑安装了apache和iis,会提示80端口冲突,如何解决apache与iis 80端口冲突的问题呢,并且同时使用apache和iis 将apache设为使用80端口,IIS使用其它端口, ...

  3. debian 下的vi 上下左右键问题

    小白一只,查了一下vi的版本信息 发现好像是vim 于是把~/.vimrc 变量设置了一下就好了。 将set compatible 设置成set nocompatible . 这是因为系统会默认vim ...

  4. openCV 和GDI画线效率对比

    一. 由于项目需要,原来用GDI做的画线的功能,新的项目中考虑到垮平台的问题,打算用openCV来实现,故此做个效率对比. 二. 2点做一条线,来测试效率. 用了同样的画板大小---256*256的大 ...

  5. Windows跨进程设置文本和发送消息

    进程内设置文本,可以调用SetWindowText,跨进程这个会无效,应当如下:::SendMessage(hWnd, WM_SETTEXT, NULL, (LPARAM)文本内容); 注意这里不能使 ...

  6. [Preact] Use State and Props in the Component Render Function

    Preact offers, in addition to the regular component API from React, the ability to access both props ...

  7. swift学习第十一天:类的定义

    一: 主要内容 类的介绍和定义 类的属性 类的构造函数 一. 类的介绍和定义 Swift也是一门面向对象开发的语言 面向对象的基础是类,类产生了对象 在Swift中如何定义类呢? class是Swif ...

  8. Objective-C中 ==、isEqual、isEqualToString判断字符串相等

    图片发自简书App 在判断一个字符串类型的变量是否与某字符时相等,你可能写下这样一行代码 if (activityType == @"0"){} //activityType是某一 ...

  9. 第一次使用docker for windows 遇到的坑

    原文:第一次使用docker for windows 遇到的坑 1. 目前win10安装docker, 不需要安装其他工具,可直接到官网下载 2. 此版本的docker可同时运行Windows con ...

  10. windows phone8.1:页面导航详解

    小梦给大家带来windows phone 8.1应用开发实战教程,分享自己学习,开发过程中的经验和技巧. 今天给大家分享windows phone 8.1页面导航相关知识.涉及知识点如下: 页面一导航 ...