我正在使用库react-native-dropdownaler,当我在ref
中为它创建App
而不是在每个屏幕中添加组件时,我想简单地将其ref
传递给我的Router
并稍后使用它。将ref
传递给兄弟姐妹的问题是 - 它们都在一起渲染所以当我通过ref
时它仍然是undefined
render() {
return (
<View style={styles.container}>
<StatusBar />
<Router alertRef={this.alertRef}/>
<DropdownAlert ref={ref => (this.alertRef = ref)} />
</View>
);
}
您可以使用createRef
API创建ref
。 current
属性在第一次渲染之后仍然不会被设置。
class App extends React.Component {
alertRef = React.createRef();
render() {
return (
<View style={styles.container}>
<StatusBar />
<Router alertRef={this.alertRef} />
<DropdownAlert ref={this.alertRef} />
</View>
);
}
}
我将传递组件本身,并镜像组件中的方法:
render() {
return (
<View style={styles.container}>
<StatusBar />
<Router alertRef={this}/>
<DropdownAlert ref={ref => (this.alertRef = ref)} />
</View>
);
}
alertWithType(type, title, message) {
this.alertRef.alertWithType(type, title, message);
}
我最终得到的解决方案是:
class App extends Component {
constructor(props)
super(props)
this.state = {alertRef:null}
componentDidMount() {
this.setState({alertRef:this.alertRef})
}
render() {
return (
<View style={styles.container}>
<StatusBar />
{this.state.alertRef && (
<Router
alertRef={this.state.alertRef}
language={this.props.language}
/>
)}
<DropdownAlert ref={ref => (this.alertRef = ref)} />
</View>
);
}
}