父组件使用子组件,子组件绑定父组件数据 ,子组件用props使用父组件数据

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css'; class App extends Component {
constructor(props){
super(props);
// 父组件数据
this.state = {
test :202
}
}
render() {
return (
<div>
<div>
{this.state.test}
{/* 子组件绑定父组件数据 */}
<Test content={this.state.test}></Test>
</div>
</div>
);
}
} class Test extends Component{
constructor(props){
super(props) } render(){
return (
<div>
{/* 子组件使用父组件数据this.props.xxx */}
<div>{this.props.content}</div>
</div>
)
}
}
export default App;

react父转子的更多相关文章

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

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

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

    把子组件的参数回传到父组件中,并且赋值给子组件的一个实例方法. 参考React中文网: http://www.css88.com/react/docs/refs-and-the-dom.html im ...

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

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

  4. react 父组件给子组件传值

    父组件 import React from 'react'import '../page1/header.css'import { Table } from 'antd'import Child fr ...

  5. react 父组件 向 子组件 传值

    父组件 import React, { Component } from 'react'; import Test from './component/test'; //声明welcome组件 cla ...

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

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

  7. react 父组件向子组件传递函数

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

  8. react 父组件调用子组件方法、子组件调用父组件方法

    我们闲话不多说,直接上代码 // 父组件 import React, {Component} from 'react'; class Parents extends Component { const ...

  9. react 父组件与子组件双向绑定

    在项目中我们可能会遇到类似这样的场景,也就是父子组件的双向数据绑定 首先,先把在head中引入react.js.react-dom.js和可选择的babel.js(这里需要注意引用的顺序,react. ...

随机推荐

  1. RxJS之过滤操作符 ( Angular环境 )

    一 take操作符 只发出源 Observable 最初发出的的N个值 (N = count). 如果源发出值的数量小于 count 的话,那么它的所有值都将发出.然后它便完成,无论源 Observa ...

  2. ubuntu系列-很好用的截图工具shutter

    直接在ubuntu软件市场中搜索“shutter”下载即可

  3. 使用python读写CSV文件

    # -*- coding:UTF-8 -*- __autor__ = 'zhouli' __date__ = '2018/10/25 21:14' import csv with open('resu ...

  4. 理解HTTP之keep-alive(转)

    理解HTTP之keep-alive 在前面一篇文章中讲了TCP的keepalive,这篇文章再讲讲HTTP层面keep-alive.两种keepalive在拼写上面就是不一样的,只是发音一样,于是乎大 ...

  5. task 定时设置

    每天凌晨2点  0 0 2 * * ?和每天隔一小时 0 * */1 * * ? 例1:每隔5秒执行一次:*/5 * * * * ? 例2:每隔5分执行一次:0 */5 * * * ? 在26分.29 ...

  6. for all entries

    1.必须要判断for all entries in后面的内表是否为空,如果为空,where条件中与内表中字段进行比较的结果全部为真,会导致取出非常多的数据,影响系统性能.2.使用for all ent ...

  7. os & sys

    os os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 os.chdir("dirname") 改变当前脚本工作目录:相当于shell下cd os.c ...

  8. 序列化_Transient

    要实际的操作一下Serialize的代码Demo, 加深理解(某投行很喜欢问这个问题):transient关键字虽然目前还没有人面试过我,但是也是个考点

  9. java的eclipse的使用

    1下载eclipse地址:www.eclipse.org/downloads/ 解压就可安装 注意: 这可能你是没有安装java运行环境(jre或jdk) 直接www.java.com,下载就行 下一 ...

  10. win10 x64中 windbg x64 安装配置符号库

    根据系统安装好x64版本,我的系统是win10 x64 ; windbg下载地址 https://developer.microsoft.com/zh-cn/windows/hardware/down ...