在父组件中通过ref,在标签内直接调用子组件的方法,会在渲染时报错,childFn is undefined,
原因未知,个人猜测是因为父组件在加载时子组件还未渲染,this获取不到child的方法
解决方法:
-
在父组件内自定义一个函数,在函数内调用this.child.childFn,然后在标签内调用该自定义函数来间接调用子组件的方法
-
直接在标签内调用,但要在外层嵌套一层箭头函数
//父组件
class Parent extends Component {
constructor() {
super()
}
//2. parentFn再调用childFn
parentFn = () => {
this.child.childFn()
}
render() {
return (
<div>
<h2>这是父组件</h2>
//1. 点击方法一按钮会先触发parentFn
<button onClick={this.parentFn}>方法一</button>
//点击方法二按钮会直接调用Child组件里的childFn方法
<button onClick={() => this.child.childFn()}>方法二</button>
<hr />
//将子组件通过ref绑定到this上,通过this.child来调用组件内的方法或变量
<Child ref={e => this.child = e} />
</div>
)
}
}
使用taro开发微信小程序
在app.js里定义的全局变量globalData,在页面内通过app.globalData取不到值,原因还没找到,猜测是由于taro生成的环境和原生环境不同,
解决方案:在app.js的state里定义一个globalData,在页面通过app.$app.state.globalData来获取