通过ref调用条件判断的组件时，用this.refName获取不到子组件实例

[CYchenyan]

组件中条件判断两个子组件：
{ENV_TYPE === 'weapp' &&
<CMap
ref={e => this.mapContainer = e}
onFillStart={this.fillStart}
onLoadVehicles={this.loadVehicles}
step={this.props.step}
start={start}
terminate={terminate}
markers={this.state.markers}
order={updatedOrder}
previewOrderConfig={previewOrderConfig}
screenHeight={this.state.screenHeight}
/>
}

    {ENV_TYPE === 'h5' &&
      <H5Map
        ref={e => this.mapContainer = e}
        screenHeight={this.state.screenHeight}
        step={this.props.step}
        onFillStart={this.fillStart}
      />
    }

在方法中调用：
/**

• 用户点击定位
  **/
  setMapCenterByUser = () => {
  console.log( this.mapContainer) // null
  this.mapContainer && this.mapContainer.setMapCenterByUserLocation(true)
  }
  如果在组件中不是条件判断显示子组件，该方法中能获取到this.mapContainer实例

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[yuche]

你的平台是哪个，另外你的代码乱了，这样缺内容是无法复现的

[CYchenyan]

问题详细描述：
index.js:
import Taro, { Component } from '@tarojs/taro'
import { View, Button } from '@tarojs/components'

import Test1 from './Test1'
import Test2 from './Test2'

import './index.scss'

export default class Test extends Component {
constructor(props) {
super(props)

this.testContainer = null

}

state = {
type: 'test1',
}

showTest = () => {
console.log(this.testContainer) // @**此时打印出this.testContainer值为null,原因是：组件test1和组件test2的ref都是 this.testContainer。但是在react中，不会有这个问题。
}

render() {

return (
  <View>
    {this.state.type === 'test1' &&
    <Test1 ref={e => this.testContainer = e}/>
    }

    {this.state.type === 'test2' &&
    <Test2 ref={e => this.testContainer = e}/>
    }

    <Button onClick={this.showTest}>show test ref</Button>
  </View>
)

}
}

Test1:
import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'

export default class Test1 extends Component {

render() {

return (
  <View>
    this is Test1
  </View>
)

}
}

Test2:
import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'

export default class Test2 extends Component {

render() {

return (
  <View>
    this is Test2
  </View>
)

}
}

[CYchenyan]

微信小程序端有这个问题，h5没有

[Chen-jj]

@CYchenyan 还是分开两个值来分别保存吧。

[CYchenyan]

暂时只能这么解决了，这个你们不打算修复吗

[Chen-jj]

@CYchenyan 初始化阶段的可以改。但如果你 setState 改变 type 值更改渲染的组件，这时的 this.testContainer 无论 H5 还是小程序还是会错的，所以不建议绑定同一个值。

[taro-bot]

Hello~

您的问题楼上已经有了确切的回答，如果没有更多的问题这个 issue 将在 15 天后被自动关闭。

如果您在这 15 天中更新更多信息自动关闭的流程会自动取消，如有其他问题也可以发起新的 Issue。

Good luck and happy coding~