//父组件
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. SOA究竟是个啥

    SOA(Service-Oriented Architecture),中文全称:面向服务的架构. SOA让把系统分离成不同的服务,使用接口来进行数据交互,终于达到整合系统的目的. 专业的词总是让人懵懵 ...

  2. jenkins对接gitlab和git

    1 需要的插件 jenkins的git插件和jenkins的gitlab插件. 2 对接gitlab 在系统配置中,随便起一个连接的名字,设置url,可以直接用ip地址,端口号默认是80,不需要写明. ...

  3. Cocos2d-x可以实现的效果总结

    Cocos2d-x可以实现的效果总结  动作(Actions) move移动:moveto/moveby 从一个位置移动到另外一个位置 从一个位置移动多少数量级 rotate旋转:rotateto/r ...

  4. java错误:无法将Object转换为int类型

    Object value java要想将Object转换为int类型,就必须先将Object转换为String,然后String再转换为int,如下: Integer.parseInt(String. ...

  5. Android webkit keyevent 事件传递过程

    前言:基于android webview 上定制自己使用的可移植浏览器apk,遇到好多按键处理的问题.所以索性研究了一下keyevent 事件的传递流程. frameworks 层 keyevent ...

  6. win10系统下,开启数据库远程连接方式

    右键左下角的windows标志,选择控制面板 2.查看方式修改为大图标 3.选择高级设置 4.新建入站规则 5.选择端口然后下一步 6.选择tcp协议,端口输入80,3306 7.选择允许连接 8.规 ...

  7. E20170926-mk

    validation   n. 确认; proposal n. 建议; 提议; 求婚; 〈美〉投标; teaser   n. 戏弄者,喜欢戏弄别人的人; 棘手的问题; batch   n. 一批; 一 ...

  8. Linux 用户管理(1) (/etc/passwd)

    Linux所有的用户都在/etc/passwd文件里面. 1.为什么需要用户 1)计算机及网络资源的合理分配  2)可以控制用户访问系统的权限.3)身份认证 4) 进程 以某个用户的身份来运行 2.用 ...

  9. [Apple开发者帐户帮助]八、管理档案(4)

    您可以编辑,下载或删除在开发人员帐户中创建的配置文件.例如,如果您撤消了证书或禁用了配置文件中包含的设备,请编辑配置文件.或重新置备的个人资料,如果因为你它是无效的功能的应用程式服务. 注意: Xco ...

  10. akka设计模式系列-actor锚定

    actor锚定模式是指使用actorSelection对acor进行锚定的设计模式,也可以说是一个对actor的引用技巧.在某些情况下,我们可能需要能够根据Actor的path锚定对应的实例.简单来说 ...