父组件使用子组件,子组件绑定父组件数据 ,子组件用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. bitcode?

    今天在网站上看到一篇关于第三方库不包含bitcode就会报错的文章,感觉剖析得很详细,分享出来,希望可以对iOS初入门者有所帮助.下面我们就一起来看看吧. 用Xcode 7 beta 3在真机(iOS ...

  2. 阿里云视频直播API签名机制源码

    阿里云视频直播API签名机制源码 本文展示:通过代码实现下阿里视频直播签名处理规则 阿里云视频直播签名机制,官方文档链接:https://help.aliyun.com/document_detail ...

  3. 865. Smallest Subtree with all the Deepest Nodes 有最深节点的最小子树

    [抄题]: Given a binary tree rooted at root, the depth of each node is the shortest distance to the roo ...

  4. linux命令学习之:chmod

    chmod命令用来变更文件或目录的权限.在Linux系统家族里,文件或目录权限的控制分别以读取R.写入W.执行X3种一般权限来区分,另有3种特殊权限可供运用.用户可以使用chmod指令去变更文件与目录 ...

  5. 【gRPC使用问题3】生成出来无法识别Google.Api.AnnotationsReflection.Descriptor

    1.问题截图: 2.解决方案: Install the package "Google.Api.Gax.Grpc". From the Package Manager Consol ...

  6. Vue 局部组件和全局组件的使用

    <template> <div id="app"> <!--<img alt="Vue logo" src="./ ...

  7. OCSP

    一.简介   二.协议   三.其他 1)OCSP装订 https://zh.wikipedia.org/wiki/OCSP%E8%A3%85%E8%AE%A2

  8. (转)wcf项目程序调试

    由于使用分布式开发,因此在调试时,要分为客户端调试和服务端调试两种情况,下面就对这两种情况的调试步骤分别加以详细说明  调试客户端的页面代码 当仅仅需要调试客户端代码时,按照以下步骤进行操作: 1. ...

  9. 优化myeclipse启动速度以及解决内存不足问题

    解决myeclipse内存不足问题: 使用 MyEclipse 开发项目后,随着项目文件的增多,以及运行时间的增加,实际上 MyEclipse 所消耗的内存是会一直增大的,有的时候会出现 MyEcli ...

  10. poj 2785 让和为0 暴力&二分

    题目链接:http://poj.org/problem?id=2785 大意是输入一个n行四列的矩阵,每一列取一个数,就是四个数,求有多少种着四个数相加和为0的情况 首先脑海里想到的第一思维必然是一个 ...