父组件使用子组件,子组件绑定父组件数据 ,子组件用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. 【网络编程三】网络通信之多进程(线程)实现TCP通信(一)

    [多进程] [多线程] /************************************************************************* > File sum ...

  2. Memcached学习一:Memcached安装使用

    这篇博文以实用为目的,因此,先阐述如何安装Memcached,然后在实践中谈谈自己自己对Memcached的一点理解. 首先,安装Memcached,点击此处下载安装文件以及源码. 解压文件(我这里将 ...

  3. 一分钟了解mongodb(转)

    mongo的由来 截取自英文俚语humongous,意为”巨大的”,是否表明mongodb在设计之初就是为大数据量处理而生呢? mongodb是个啥 mongodb是个可扩展.高性能.开源.面向文档( ...

  4. MySQL 中的数据类型介绍(转)

    据我统计,MySQL支持39种(按可使用的类型字段统计,即同义词也作多个)数据类型.下面的介绍可能在非常古老的mysql版本中不适用. 转载出处:http://blog.csdn.net/anxpp/ ...

  5. TabLayout+ViewPager的简单使用

    1.   build.gradle文件中加入 compile 'com.android.support:design:22.2.0' 2.写Xml文件,注意TabLayout的三个属性 app:tab ...

  6. JSP使用sessionScope获取session值

    场景:有些实体对象可以放到HttpSession对象中,保正在一个会话期间可以随时获取这个对象的属性,例如可以将登录用户的信息写入session,以保证页面随时可以获取并显示这个用户的状态信息.下面以 ...

  7. docker-ce-17.09 容器创建,运行,进入,删除,导入/导出

    docker容器是镜像运行的一个运行实例,带有额外的可写文件层. 一.创建容器 > docker create -it centos:latest create命令新建的容器处于停止状态,可以使 ...

  8. IIS站点报拒绝访问Temporary ASP.NET Files的解决办法

    IIS站点本来运行的好好的,突然就出现了:Temporary ASP.NET Files拒绝访问的问题.遇到此类问题,请逐步排查,定可解决. 原因:Windows操作系统升级导致. 办法: 1.检查C ...

  9. org.apache.commons.net.ftp

    org.apache.commons.NET.ftp Class FTPClient类FTPClient java.lang.Object Java.lang.Object继承 org.apache. ...

  10. Redis单机安装

    安装过程 安装环境 ubuntu14.04 server wget http://download.redis.io/releases/redis-3.2.5.tar.gz tar -xzvf ./r ...