react组件父传子,子组件使用父组件的数据,用props

  1. import React, { Component } from 'react';
  2.  
  3. class App extends Component {
  4. constructor(props){
  5. super(props);
  6. this.state = {
  7. arr :[1,2,3] // 父组件数据
  8. }
  9. }
  10. render() {
  11. return (
  12. <div>
  13. {/* 父组件直接使用this.state */}
  14. <div>{this.state.arr}</div>
  15. {/* 把父组件数据绑定到子组件中 */}
  16. <Test content={this.state.arr}></Test>
  17. </div>
  18. );
  19. }
  20. }
  21. class Test extends Component {
  22. render(){
  23. return (
  24. <div>
  25. {/* this.props获取父组件数据 */}
  26. <div>{this.props.content}</div>
  27. </div>
  28. )
  29. }
  30. }
  31. export default App;

react组件父传子的更多相关文章

  1. vue 组件之间相互传值 父传子 子传父

    1.父传子 把要传入的值放到父标签里  子组件使用props接收 父写法 子写法 2.子传父 子组件: childrenOnclick() { // 发布自定义事件 this.$emit(" ...

  2. Vue父子组件传值 | 父传子 | 子传父

    父传子 父容器 <template> <div> <zdy :module='test'></zdy> </div> </templa ...

  3. Vue ---- 组价 组件化 子传父 父传子

    目录 补充js的for循环: 组件 1.组件的分类: 2.组件的特点 3.创建局部组件 4.全局组件 二.组件化 一.组件传参父传子 二.组件传参:子传父 补充js的for循环: // for in遍 ...

  4. vue 评论 computed watch 分隔符 局部组件 全局组件 子传父消息|父传子消息

    评论案例 splice: (start 几位,替换(新增)内容) splice(0,0,内容)在头部插入内容 splice(0,1) 把索引为0的往后删除1位  splice(0,1,内容)把索引为0 ...

  5. vue的组件通讯 父传子 -- 子传父-- 兄弟组件的传值 vue的组件传值

    首先文字简单撸一下 父子传子   -------首先在父组件上绑定一个属性,在子组件里用props接收,可以是数组或者是对象 子传父   ------在父组件升上自定义一个方法,在子组件里通过this ...

  6. Vue其他指令-组件-全局-局部-组件的交互父传子

    v-once指令 once:一旦,当...时候 <!DOCTYPE html> <html lang="zh"> <head> <meta ...

  7. vue小故事之父子(上下级)通信之父传子props

    vue小故事之父子(上下级)通信之父传子props vue 父子(上下级)通信 props  或许你对父子通信有点迷糊,为什么这样那样父子之间就可以通信了,以下通过一个小故事来进行解说,故事模型或许有 ...

  8. vue子传父、父传子

    子传父 vue子传父使用$emit传值 子组件: <template> <div> <button @click="toParent">点击传到 ...

  9. vue传值 ---- >> 父传子,props()

    父组件:     1 <template> 2     <div class="comment"> 3         <div>comment ...

随机推荐

  1. 吉哥系列故事——恨7不成妻(数位DP)

    吉哥系列故事——恨7不成妻 http://acm.hdu.edu.cn/showproblem.php?pid=4507 Time Limit: 1000/500 MS (Java/Others)   ...

  2. 修改bootstrap-table中的分页样式

    使用bootstrap-table时,使用$("")选择器没办法选中下方的分页button按钮,可能跟它是动态生成的有关吧. 最终找到与之对应的js(bootstrap-table ...

  3. Mac Sublime Text3 如何安装插件

    1.打开sublime text3后按快捷键control+`后下面会出来东西,然后输入如下命令. import urllib.request,os; pf = 'Package Control.su ...

  4. [剑指Offer]25-合并两个排序链表

    题目链接 https://www.nowcoder.com/practice/d8b6b4358f774294a89de2a6ac4d9337?tpId=13&tqId=11169&t ...

  5. C++ 单例模式(懒汉、饿汉模式)

    1.简单的单例模式实现 2.C++的构造函数不是线程安全的,所以上述代码在多线程的情况下是不安全的,原因是new Singelton时,这句话不是原子的,比如一个线程执行了new的同时,另一个线程对i ...

  6. DBCO

    实现SAP连接外部数据库 也可用SM30维护DBCON的内容 SAP提供了对原生sql的操作,主要有以下几个类组成: CL_SQL_STATEMENT - Execution of SQL State ...

  7. html标签三

    1.下拉框和下拉表框 <select name="" id="" multiple> <option value="xx" ...

  8. linux基础编程:IO模型:阻塞/非阻塞/IO复用 同步/异步 Select/Epoll/AIO(转载)

      IO概念 Linux的内核将所有外部设备都可以看做一个文件来操作.那么我们对与外部设备的操作都可以看做对文件进行操作.我们对一个文件的读写,都通过调用内核提供的系统调用:内核给我们返回一个file ...

  9. php mysql 丢失更新

    php mysql 丢失更新问题,搜索整个互联网,很少有讲到,也许和php程序员出身一般都是非科班出身有关系吧. 另外php程序一般都是简单数据,很少有并发一致性问题,所以大家都没有谁专门提出这个问题 ...

  10. 补课:Shell命令${}

    Shell中的${}.##和%%使用范例: 代码如下:file=/dir1/dir2/dir3/my.file.txt可以用${ }分别替换得到不同的值:${file#*/}:删掉第一个 / 及其左边 ...