父组件使用子组件,子组件绑定父组件数据 ,子组件用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. PHP简单工厂模式、工厂方法模式和抽象工厂模式比较

    PHP工厂模式概念:工厂模式是一种类,它具有为您创建对象的某些方法.您可以使用工厂类创建对象,而不直接使用 new.这样,如果您想要更改所创建的对象类型,只需更改该工厂即可.使用该工厂的所有代码会自动 ...

  2. Flexible variants in STVARV

    DATA: lv_time TYPE TVARV_VAL, lv_tvarvc(25) . CONSTANTS lv_prefix(25) VALUE 'ZZXXS_'. CONCATENATE lv ...

  3. C++ 读取文本文件内容到结构体数组中并排序

    成绩排行:从Score.txt文件读取学生信息,对其进行排序,按回答题数从大到小排,若相等,按分数从小到大排 #include<iostream> #include<fstream& ...

  4. linux操作Mysql数据库基本命令

    1.显示数据库 show databases; 2.选择数据库 use 数据库名; 3.显示数据库中的表 show tables; 4.显示数据表的结构 describe 表名; 5.显示表中记录 S ...

  5. 安装后没有IP

    修改  /etc/sysconfig/network-scripts/ifcfg-eth0 改为yes

  6. VML、SVG、Canvas简介

    1.VML: VML的全称是Vector Markup Language(矢量可标记语言),矢量的图形,意味着图形可以任意放大缩小而不损失图形的质量,这在制作地图上有很大用途,VML只是被IE支持. ...

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

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

  8. msysgit解决中文乱码问题

    项目中在用git,安装msysgit客户端后处理中文是有问题的: ls中文目录/文件名乱码:提交中文的log,push到服务器上会乱码:git log查看服务器pull过来的log乱码. 1.ls命令 ...

  9. 12.Mysql存储过程和函数

    12.存储过程和函数12.1 什么是存储过程和函数存储过程和函数是事先经过编译并存储在数据库中的一段SQL语句的集合,调用存储过程和函数简化应用开发人员的工作,减少数据在数据库和应用服务器之间的传输, ...

  10. Linux CentOS 7 下 Apache Tomcat 7 安装与配置

    前言 记录一下Linux CentOS 7安装Tomcat7的完整步骤. 下载 首先需要下载tomcat7的安装文件,地址如下: http://mirror.bit.edu.cn/apache/tom ...