请 react 大神帮忙看看,我这种父组件调用子组件的方案是否合理
react吧
全部回复
仅看楼主
level 2
MicrolBOBOBO 楼主
先说下我出现这种想法的原因:因为我工作的团队不建议使用 ref,ref 也确实太重了,一个ref存储了太多用不着的属性了,我就想着自己写一个类似 ref 的轻量点的方案,于是我写了下面这样的代码(Typescript 实现), 我把这种方案自称为 “prox” 组件代理
(以下是最简单的一段案例,只是为了说明我的这个方案而已)
(因为工作中确实有人提出我的这种方案也不好,说这种写法的代码不干净,应该用函数的形式来实现,可是他又不说明怎么用函数的方式实现父组件调用子组件,总建议用props把属性传递给父组件,不建议我在子组件中封装自己的state,我很纳闷,如果不用 ref 也不用我下面的这种方式,实在不知道该用哪种方式来实现 父组件 调用 子组件内部函数的需求)
【子组件】:
interface IChidProxy{
getName?:()=>string
}
interface IChildProps{
proxy
}
class Child extends React.PureComponent<IChildProps,{}>{
constructor(props: IChildProps) {
if(props.proxy){
const proxy: IChidProxy = {
getName: this.getName.bind(this)
}
}
}
private getName(){
return '我是子组件'
}
public render(){
return (<div>子组件的UI内容</div>)
}
}
【父组件】:
class Father extends React.PureComponent<{},{}>{
childProxy:IChidProxy = {}
public componentDidMount() {
// 注意:这里是重点二:通过子组件代理,调用子组件内部的函数
const childName = this.childProxy.getName!()
alert(childName)
}
// 注意:这里是重点一:获取子组件代理
public render(){
return (<div>
<Child proxy={(proxy: IChidProxy)=>{
this.childProxy = proxy
}} />
</div>)
}
}
2020年09月30日 05点09分 1
level 2
MicrolBOBOBO 楼主
上面的子组件的代理接口手误写错了,应该是这样
interface IChildProps{
proxy?: IChidProxy
}
2020年09月30日 06点09分 2
level 1
父组件挂载的时候,子组件存在没有挂载的可能性。建议直接学最新的 函数式组件。数据驱动思想,比对象更直观。
2021年02月03日 14点02分 3
1