父组件使用子组件,子组件绑定父组件数据 ,子组件用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. 【python中单链表的实现】——包括初始化、创建、逆序、遍历等

    # coding=utf-8 class mynode(object): def __init__(self, data, nextnode = None): self.data = data sel ...

  2. TZOJ 3315 买火车票(线段树区间最小值)

    描述 Byteotian州铁道部决定赶上时代,为此他们引进了城市联网.假设城市联网顺次连接着n 个市从1 到n 编号(起始城市编号为1,终止城市编号为n).每辆火车有m个座位且在任何两个运送更多的乘客 ...

  3. swift - 启动APP 黑屏

    https://blog.csdn.net/chengkaizone/article/details/50478045

  4. openCV基础知识

    openCV主体分为5个模块: CV图像处理函数和计算机视觉算法: ML机器学习库,包含许多聚类和数据分析函数: HighGUI图像和视频的输入输出: [分成三部分:硬件部分--摄像机;文件部分--载 ...

  5. 安装opencv2.4.9

    首先如果你的运气足够好,你完全可以按照 : https://my.oschina.net/u/1757926/blog/293976 或者OpenCV中文论坛上的Linux下opencv的安装方法 但 ...

  6. WEB框架Django之中间件/缓存/CBV/信号

    一Djano的中间件 1 中间件的概念 中间件顾名思义,是介于request与respose处理之间的一道处理过程,相对比较轻量级,并且全局上改变django的输入与输出.因为改变是全局, 所有需要谨 ...

  7. C# 解决SharpSvn启动窗口报错 Unable to connect to a repository at URL 'svn://....'

    在远程机打开sharpsvn客户端测试,结果报错 Svn启动窗口报错 Unable to connect to a repository at URL 'svn://...' 咋整,我在win10我的 ...

  8. c# 子线程打开子窗体

    下边是在子线程打开子窗口,结果跑到else 里边了跨线程操作窗体控件InvokeRequired失效,无法用于打开子窗体,addonetwo.InvokeRequired,访问不了呢? 大神知道帮忙回 ...

  9. IIS站点工作原理与ASP.NET工作原理

    IIS站点工作原理与ASP.NET工作原理  一.IIS IIS 7.0工作原理图 两种模式: 1.用户模式(User Mode)(运行用户的程序代码.限制在特定的范围内活动.有些操作必须要受到Ker ...

  10. 1、javaweb学习之配置文件web.xml

    今天这里主要讲述javaweb中的配置文件web.xml中的内容及其作用,都是基础部分,对于初学者需要好好掌握理解. 简单配置: <servlet>    <servlet-name ...