//父组件 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> </div>
) }
|
请发表评论