父组件使用子组件,子组件绑定父组件数据 ,子组件用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. Cisco无线AP上联口为trunk时无法注册故障处理

    网络环境:WLC5520  AP:1832i-h-k9 客户实施过程中电话告知其将AP和交换机互联的端口类型设置为TRUNK口后,AP无法注册到WLC上,后经过查看配置发现客户用于AP管理的VLAN为 ...

  2. Codeforces Beta Round #40 (Div. 2)

    Codeforces Beta Round #40 (Div. 2) http://codeforces.com/contest/41 A #include<bits/stdc++.h> ...

  3. vue 使用scss

    使用vue-cli模板创建的项目中,使用scss步骤 1. cmd命令: cnpm  install sass-loader --save-dev cnpm install node-sass --s ...

  4. am start的总结,-d参数的总结,以及python中传递内容包含中文及特殊字符&的解决方案

    一.am start的内容的整理 主要包含以下内容:am start的常规操作及参数的含义,-d 参数的含义,以及如何在APK中设置参数获取 使用命令如下:adb shell am start -n ...

  5. TZOJ 3030 Courses(二分图匹配)

    描述 Consider a group of N students and P courses. Each student visits zero, one or more than one cour ...

  6. multithreading coding

    分类:公共资源问题.公交车问题 顺序:Qseater lab, bank, doctor [饭店] geust //yuec2 Yue Cheng package lab9; public abstr ...

  7. java中元注解有四个

    @Retention @Target @Document @Inherited:  @Retention:注解的保留位置 @Retention(RetentionPolicy.SOURCE)   // ...

  8. sqlserver数据库的分离与附加

    当我们一台电脑上创建了数据库想要转移到另外一台电脑上时,由于数据库处于联机状态,不能够对数据库文件进行复制和迁移,所以我们可以将数据库从服务器上分离出去,这样我们就可以复制数据库文件了.然后将数据库文 ...

  9. Expression #1 of ORDER BY clause is not in GROUP BY clause and contains nonaggregated column 'information_schema.PROFILING.SEQ' which is not functionally dependent on columns in GROUP BY clause; this

    最近使用新版本的mysql,执行语句的时候报错.网上找了一下,解决方法如下: vim /etc/mysql/conf.d/mysql.cnf [mysqld] sql_mode=STRICT_TRAN ...

  10. JS高级:事件冒泡和事件捕获;

    1.事件:浏览器客户端上客户触发的行为成为时事件:所有的事件都是天生自带的,不需要我们去绑定,只需要我们去触发 当用户触发一个事件时,浏览器的所有详细信息都存在一个叫做event的对象上,我们把它叫做 ...