Question

我是React-Native的新手，我一直试图从另一个组件调用一个方法，但我似乎无法正确访问引用。这是我的渲染方法的样子

<Content contentContainerStyle={styles.content}>
...
  <PostComponent style={styles.cardStyle} ref="cardRef" />
     <View style={styles.horizontalTextContainer}>
       <this.refs.cardRef.getText />
     </View>
...
</Content>

在PostComponent组件中，这是我尝试调用的方法：

  getText() {
    return (
      <Text>Hello</Text>
    );
  }

在同一个组件的构造函数中，我可以使用refs来调用这样的方法：

constructor(props) {
    super(props);
    newthis = this
    this.state = {
      time: 20,
      cards: [],
    }
    var timer = setInterval(() => {
      this.setState({
      time: --this.state.time,
     })
     if(this.state.time == 0) {
        this.setState({
          time: 20,
        })
        this.refs.cardRef.timesUp();
      }
    }, 1000);
  }

奇怪的是，ref在setInverval方法中工作，但不在它之外 - 范围甚至在这里工作？另外，如果你发现我有一个hacky＆＃34; newthis＆＃34;保存全局这个 - 因为在组件的某些方法中我无法访问＆＃34;这个＆＃34; （它未定义）。

Answer 1

在构造函数中，调用时仍未装入组件。只有在componentDidMount生命周期方法之后才能安全地访问refs。也不推荐使用字符串类型引用https://facebook.github.io/react/docs/refs-and-the-dom.html。请使用回调函数语法。

在你的情况下，由于时间间隔，refs可能在setInterval中工作。该组件将安装1000毫秒。

为避免hacky newThis，您可以使用箭头函数或在构造函数中绑定它。组件的大多数回调函数都有自己的this上下文。

constructor(props) {
    super(props);
    newthis = this
    this.state = {
      time: 20,
      cards: [],
    }
 }
 componentDidMount() {
  this.timer = setInterval(() => {
      this.setState({
      time: --this.state.time,
     })
     if(this.state.time == 0) {
        this.setState({
          time: 20,
        })
        this.cardRef.timesUp();
      }
    }, 1000);
  }
  componentWillUnmount() {
   clearInterval(this.timer)
  }
...

<Content contentContainerStyle={styles.content}>
...
  <PostComponent style={styles.cardStyle} ref={(ref) => this.cardRef = ref} />
     <View style={styles.horizontalTextContainer}>
       {this.cardRef.getText()}
     </View>
...
</Content>

无法访问refs以从其他组件调用方法

1 个答案: