Refs 引用

Refs 提供了一種訪問在 render 方法中創(chuàng)建的 DOM 節(jié)點（小程序原生組件）或 Taro 組件實例的方式。

在常規(guī)的 Taro 數(shù)據(jù)流中，props 是父組件與子組件交互的唯一方式。要修改子元素，你需要用新的 props 去重新渲染子元素。然而，在少數(shù)情況下，你需要在常規(guī)數(shù)據(jù)流外強制修改子元素。被修改的子元素可以是 Taro 組件實例，或者是一個 DOM 元素。在這種情況下，Taro 提供了解決辦法。

不要過度使用 Refs

你可能首先會想到在你的應用程序中使用 refs 來更新組件。如果是這種情況，請花一點時間，更多的關注在組件層中使用 state。在組件層中，通常較高級別的 state 更為清晰。例如，相比于在 Dialog 組件中暴露 open() 和 close() 方法，最好傳遞 isOpen 屬性。

創(chuàng)建 Refs

Taro 支持使用字符串和函數(shù)兩種方式創(chuàng)建 Ref。

使用字符串創(chuàng)建 ref

通過字符串創(chuàng)建 ref 只需要把一個字符串的名稱賦給 ref prop。然后就通過 this.refs 訪問到被定義的組件實例或 DOM 元素（小程序原生組件）。在微信小程序中，如果 ref 的是小程序原生組件，那么相當于使用 createSeletorQuery 取到小程序原生組件實例，如果是在 H5(Web) 環(huán)境中使用，那訪問到的將是 @tarojs/components 對應組件的組件實例。

class MyComponent extends Component {

  componentDidMount () {
    // 如果 ref 的是小程序原生組件，那只有在 didMount 生命周期之后才能通過
    // this.refs.input 訪問到小程序原生組件
    if (process.env.TARO_ENV === 'weapp') {
      // 這里 this.refs.input 訪問的時候通過 `wx.createSeletorQuery` 取到的小程序原生組件
    } else if (process.env.TARO_ENV === 'h5') {
      // 這里 this.refs.input 訪問到的是 `@tarojs/components` 的 `Input` 組件實例
    }
  }

  render () {
    return <Input ref='input' />
  }
}

通過函數(shù)創(chuàng)建 ref

你也可以通過傳遞一個函數(shù)創(chuàng)建 ref, 在函數(shù)中被引用的組件會作為函數(shù)的第一個參數(shù)傳遞。如果是被引用的組件是自定義組件，那可以在任意的生命周期訪問引用。

不管在任何情況下，Taro 都推薦你使用函數(shù)的方式創(chuàng)建 ref。

class MyComponent extends Component {

  roar () {
    // 會打印 `miao, miao, miao~`
    this.cat.miao()
  }

  refCat = (node) => this.cat = node // `this.cat` 會變成 `Cat` 組件實例的引用

  render () {
    return <Cat ref={this.refCat} />
  }
}

class Cat extends Component {
  miao () {
    console.log('miao, miao, miao~')
  }

  render () {
    return <View />
  }
}

通過 createRef 創(chuàng)建 ref

自 v1.3.0-beta.0 起 支持

Refs 還是使用 Taro.createRef() 創(chuàng)建的，并通過 ref 屬性附加到 Taro 元素。在構造組件時，通常將 Refs 分配給實例屬性，以便可以在整個組件中引用它們。

當 ref 被傳遞給 render 中的元素時，對該節(jié)點的引用可以在 ref 的 current 屬性中被訪問。

class MyComponent extends Component {

  this.cat = Taro.createRef()

  roar () {
    // 會打印 `miao, miao, miao~`
    this.cat.current.miao()
  }

  render () {
    return <Cat ref={this.cat} />
  }
}

class Cat extends Component {
  miao () {
    console.log('miao, miao, miao~')
  }

  render () {
    return <View />
  }
}