从兄弟姐妹通过裁判

Question

我正在使用库react-native-dropdownaler，当我在App中为其创建ref时，而不是在每个屏幕中添加组件，我想简单地将其ref传递给我的Router并以后使用。将其ref传递给兄弟姐妹的问题是 - 它们都一起渲染，因此当我通过ref时，它仍然是undefined

render() {
  return (
    <View style={styles.container}>
      <StatusBar />
       <Router alertRef={this.alertRef}/>
       <DropdownAlert ref={ref => (this.alertRef = ref)} />
    </View>
  );
}

Answer 1

您可以使用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>
    );
  }
}

Answer 2

我会传递组件本身，然后镜像组件中的方法：

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);
}

Answer 3

我最终得到的解决方案是：

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>
    );
  }
}