//父组件
import * as React from 'react'
import { Input } from 'antd'
const Search = Input.Search
import "./index.less"
import Child from "./compon/list"
interface IProps {
MakeMoney?: () => void }
export default class ProjectList extends React.Component<IProps>{
constructor(props: IProps) {
super(props) }
  
child: any = {}  //主要加这个
onRef = (ref) => {
this.child = ref
}
// 调用组件进行通信
getDS = () => {
this.child.toggle() }
render(){
return (
  <div>
    <button onClick={this.getDS}>父组件点击切换</button>
    <Child ref={this.onRef} />
  </div>

)
}
}

//子组件
import * as React from 'react'
import { Row, Col } from 'antd';
import "./list.less"
interface IProps {
msg?: any
MakeMoney?:any
//ref?:any }
interface IState {
lg?: any }export default class List extends React.Component<IProps, IState> constructor(props: IProps) {
    super(props)

  }
state = {
lg: 6
}
toggle = () => {//父组件要调用的方法
console.log('f')
this.setState({
lg: 12
})
} StudyMakeMoney=()=>{ // 调用父组件方法
this.props.MakeMoney();
}
render(){
const { lg } = this.state;
return (
<div>
  <button onClick={this.StudyMakeMoney}>子组件</button   </div>
  )
}

react typescript 父组件调用子组件的更多相关文章

  1. react 父组件调用子组件方法

    import React from 'react'import '../page1/header.css'import { Table } from 'antd'import Child from ' ...

  2. React 父组件调用子组件的方法

    父组件调用子组件的方法 React v16.3.0 及以后版本使用 import React, {Component} from 'react'; export default class Paren ...

  3. vue 父组件调用子组件内置方法

    背景介绍:外派到泰康做项目.这个项目中有个选择组织的功能,是一个树桩结构的懒加载,于是我就element-ui的tree组件封装了一个公共的组件. 但是后来发现他们的公司组织结构不是都请求的同一个接口 ...

  4. Vue 父组件调用子组件的方法

    qwq  前两天看了下vue,父子组件方法的调用,怕忘记,所以做个小记录. 一.父组件调用子组件的方法 1.父组件 <template> <div id="rightmen ...

  5. vue+element ui项目总结点(四)零散细节概念巩固如vue父组件调用子组件的方法、拷贝数据、数组置空问题 等

    vue config下面的index.js配置host: '0.0.0.0',共享ip (假设你的电脑启动了这个服务我电脑一样可以启动)-------------------------------- ...

  6. 父组件调用子组件 viewChild

    父组件调用子组件 1.在子组件的ts中声明一个变量 public  lineout:any="你好,我是被父组件调用的子组件";  2.在父组件的html中写入 (引入子组件) & ...

  7. vue父组件调用子组件方法、父组件向子组件传值、子组件向父组件传值

      一.父组件调用子组件方法 父组件代码  parent.vue <template> <div> <button @click="parentFun" ...

  8. vue:父子组件间通信,父组件调用子组件方法进行校验子组件的表单

    参考: ElementUI多个子组件表单的校验管理:https://www.jianshu.com/p/541d8b18cf95 Vue 子组件调用父组件方法总结:https://juejin.im/ ...

  9. vue中子组件调用父组件里面的数据和方法 父组件调用子组件的数据和方法

    1.子组件直接调用父组件的数据和方法 在父组件father,vue <template> <div> <!-- 父组件里面的数据 --> <p>父组件里 ...

  10. Vue3 父组件调用子组件的方法

    Vue3 父组件调用子组件的方法 // 父组件 <template> <div> 父页面 <son-com ref="sonRef"/> < ...

随机推荐

  1. 用WebCollector爬取新浪微博数据

    教程已转移:http://datahref.com/archives/28 WebCollector爬取新浪微博等完整演示样例project可加群250108697或345054141从群文件里下载. ...

  2. MVC模式利用xib文件定制collectionCell

    数据来源于豆瓣网~仅供学习交流~ 本实例练习用到了SDWebImage框架:实现从网络端下载图片的功能 下载地址:https://github.com/rs/SDWebImage 实现效果及框架: x ...

  3. Hadoop生态系统学习路线

    主要介绍Hadoop家族产品,经常使用的项目包含Hadoop, Hive, Pig, HBase, Sqoop, Mahout, Zookeeper, Avro, Ambari, Chukwa.新添加 ...

  4. IPV6相关RFC文档

    1. 通用 IPv6的通用RFC和Internet草案 RFC# 类 标题 1752 标准记录 对IP下一代协议的建议 1924 资料 IPv6地址的压缩表示法 2851 标准记录 Internet网 ...

  5. 斯坦福《机器学习》Lesson8感想-------1、SMO

    从上一篇文章可知支持向量(supervector)就是指的离分隔超平面近期的那些点.整个SVM最须要的步骤是训练分类器.得到alpha,从而得到整个用于数据分类的分隔超平面.支持向量机(super v ...

  6. 一个尖括号能干什么,画一个笑脸开始(为了支持交互,它又增添了JavaScript。HTML页面也越来越臃肿。于是CSS便诞生了。API和核心代码的出现使HTML能够访问更复杂的软件功能--支持更高级的交互和云服务集成。这就是今天的HTML5)

    一个尖括号 < 一个尖括号能干什么 < ? 你可以编出一顶帽子 <(:-p 或一张笑脸 :-> 再或者更直接一些 20世纪90年代初,html作为一种简单标记语言面世,用于在互 ...

  7. CJOJ1857 -PG图

    Description 背景 LDN不知道为什么特别喜欢PG,也许是某种原因吧…… 有一天,他发明了一个游戏“PG图”. 问题描述 给定一个有向图,每条边都有一个权值. 每次你可以选择一个节点u和一个 ...

  8. spark 操作Hive时遇到的问题

    To adjust logging level use sc.setLogLevel(newLevel). For SparkR, use setLogLevel(newLevel).17/10/14 ...

  9. Akka源码分析-Router

    akak中还有一个比较重要的概念,那就是Router(路由).路由的概念,相信大家都不陌生,在akka中,它就是其他actors的一个代理,会把消息按照路由规则,分发给指定的actor.我一般喜欢把R ...

  10. tp 3.2 组合查询, 字符串模式查询

    $User = M("User"); // 实例化User对象 $map['id'] = array('neq',1); $map['name'] = 'ok'; $map['_s ...