React 父组件调用子组件的新方案(自创)

先说下我出现这种想法的原因:因为我工作的团队不建议使用 ref,ref 也确实太重了,一个ref存储了太多用不着的属性了,我就想着自己写一个类似 ref 的轻量点的方案,于是我写了下面这样的代码(Typescript 实现), 我把这种方案自称为 “prox” 组件代理

(以下是最简单的一段案例,只是为了说明我的这个方案而已)
(因为工作中确实有人提出我的这种方案也不好,说这种写法的代码不干净,应该用函数的形式来实现,可是他又不说明怎么用函数的方式实现父组件调用子组件,总建议用props把属性传递给父组件,不建议我在子组件中封装自己的state,我很纳闷,如果不用 ref 也不用我下面的这种方式,实在不知道该用哪种方式来实现 父组件 调用 子组件内部函数的需求)

【子组件】:

interface IChidProxy{
getName?:()=>string
}

interface IChildProps{
proxy?: IChidProxy
}

class Child extends React.PureComponent{
constructor(props: IChildProps) {
if(props.proxy){
const proxy: IChidProxy = {
getName: this.getName.bind(this)
}
}
}

private getName(){
return '我是子组件'
}

public render(){
return (

子组件的UI内容
)
}
}

【父组件】:
class Father extends React.PureComponent<{},{}>{

childProxy:IChidProxy = {}

public componentDidMount() {
// 注意:这里是重点二:通过子组件代理,调用子组件内部的函数
const childName = this.childProxy.getName!()
alert(childName)
}

// 注意:这里是重点一:获取子组件代理
public render(){
return (


{
this.childProxy = proxy
}} />
)
}
}

你可能感兴趣的:(React 父组件调用子组件的新方案(自创))