记录一下使用React遇到的一些问题和解决办法。
假设Father1是一个开发人员不想每次都改变的封装类,要求子级只能以外部的形式插进去。
Father1 > Father2 > Father3 > Child1 (Child1是变化的,需要外部定义好传进去)
惯常操作是下面:
// 原始做法
class Father {
return (
<Father1>
<Child1 /> // 这种方式只能传入Father1的属性,不利于使用它的父级传入数据
</Father1>
)
}
Father3使用props.children展示Child1,但props.children作为一个变量无法直接传入其属性,但定义时可接收Father1的属性。这意味着要想使用直接父级的属性,需要以function的形式传入。
// 升级做法,既返回了child又可传入两个父级(书写和实际使用)的数据。
class Father {
aa: string;
// Father1内部封装的时候将该处children获取方式改为getAChild()即可。
getAChild(father3Props){
father3Props.aa = aa;
return <Child1 {...father3Props}/>
}
return (
<Father1 getAChild={this.getAChild} />
)
}
假设Father2需要调用一下getAChild,也可有所操作。