父组件使用子组件,子组件绑定父组件数据 ,子组件用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. Beginning C# Programming with Unity

    Welcome to the wonderful world of programming! In this book you’ll learn the basics of programming u ...

  2. 游戏行业的女性拥有强大的新盟友:Facebook

    据外媒 TheNextWeb 报道,Facebook 本周宣布其新的游戏行业女性倡议,致力于鼓励更多的女性加入游戏行业.这家社交媒体公司专注于提供榜样和成功故事,而这实际上是一种令人愉快的方式.虽然游 ...

  3. ASP.Net MVC 在ajax接收controller返回值为Json数据

    首先,再次回忆一下ajax的标准用法:(这张图写的比较详细了)(转) 页面部分ajax代码: $.ajax({            url: "/Home/Login?account=&q ...

  4. JavaScript各种继承方式(六):寄生组合继承

    一 原理 用寄生继承来改造组合继承. function Fruit(name){ this.name = name; } Fruit.prototype.eat = function(){ conso ...

  5. Linux 下 mysql的基本配置

    Linux 下 mysql的基本配置 2013年02月27日 ⁄ MySQL ⁄ 共 3000字 ⁄ 暂无评论 ⁄ 被围观 2,483 views+ 1. Linux mysql安装:    $ yu ...

  6. Python: re.sub()第二个参数

    起源: 问题源于解析kissanime.io这个网站.为反扒抑或是防止ddos攻击,此视频页面,初进去会有个5秒延迟并提交一表单验证.而其表单验证,为下面一段html代码: <form id=& ...

  7. django序列化单表的4种方法的介绍

    这里主要是讲序列化单表的几种方法 先看下models中设计的表结构 from django.db import models # Create your models here. class Book ...

  8. go语言使用go-sciter创建桌面应用(四) 固定窗口大小

    有些时候我们需要创建的应用窗口大小不可改变. demo5.go代码如下: package main; import ( "github.com/sciter-sdk/go-sciter/wi ...

  9. Vue 全局注册逐渐 和 局部注册组件

    //定义一个名为 button-counter 的新组件 Script: Vue.component('button-counter',{//button-counter 这个是组件的名字 data: ...

  10. u-boot之怎么实现分区

    启动参数bootcmd=nand read.jffs2 0x30007FC0 kernel; bootm 0x30007FC0中kernel在哪定义,为什么可以直接引用?针对这个问题展开思考最终定位到 ...