无法使用 ref 调用 connect redux 组件上的子方法答案

【问题标题】：Unable to use ref to call the child method on a connect redux component无法使用 ref 调用 connect redux 组件上的子方法
【发布时间】：2018-09-10 17:27:18
【问题描述】：

我想在renderHiddenItem 中调用SingleCard 子组件方法。我为每个 renderItem 分配了不同的 ref 名称。但是当我调用 this.name 时，它是undefined。这段代码有什么问题吗？我怎样才能做到这一点？

    <SwipeListView
        data={this.state.listViewData}
        renderItem={(data, i) => {
          const name = 'childRef'+i
          return (
            <SingleCard
              ref={component => this.name = component}
              itm={data.item}
            />
          );
        }}
        renderHiddenItem={(data, i) => {
            const name = 'childRef'+i
            return (
                <TouchableOpacity onPress={ () => console.log(this.name)}>
                  <Text> h </Text>
                </TouchableOpacity>
            );
          }
        }}
      />

更新： 我想触发一些写在 singleCard 组件中的动作。需要打电话给renderHiddenItem。

像这样：

this.childRef0.someMethod
this.childRef1.someMethod

【问题讨论】：

在我看来，renderHiddenItem 在 SingleCard 组件挂载时或之前被调用，这意味着 ref 将始终未定义。你能详细说明你想做什么吗？也许还有其他解决方案。
@NemiShah 更新了！在 renderItem 之后调用 renderHiddenItem。
是的，但是 SingleCard 组件会在 renderHiddenItem 之前挂载吗？尝试登录单卡的componentDidMount
没有。 renderHiddenItem 在单卡中的 componentDidMount 之前被调用。
@NemiShah Doc 说 - 引用首先设置在第一个 render 之后，但在 componentDidMount 之前

标签： reactjs react-native react-redux parent-child ref

【解决方案1】：

您需要使用动态变量而不是名称，这可以通过使用括号表示法来完成

<SwipeListView
    data={this.state.listViewData}
    renderItem={(data, i) => {
      const name = 'childRef'+i
      return (
        <SingleCard
          ref={component => this[name] = component}
          itm={data.item}
        />
      );
    }}
    renderHiddenItem={(data, i) => {
        const name = 'childRef'+i
        return (
            <TouchableOpacity onPress={ () => console.log(this[name])}>
              <Text> h </Text>
            </TouchableOpacity>
        );
      }
    }}
  />

此外，当您在使用 HOC 创建的组件上使用 ref 时，例如 react-redux 中的 connect，大多数库都提供了一个名为 getWrappedInstance 的方法来获取实际组件的引用，而不是connect 组件。你可以像这样使用它

this[name].getWrappedInstance()

但最初您需要将{withRef: true} 设置为connect 在SingleCard 中使用的第四个参数

connect(mapStateToProps, mapDispatchToProps, null, { withRef: true })(SingleCard);

你可以在这里阅读更多关于它的信息

https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options

【讨论】：

打印connect 对象，该对象确实有任何子组件方法，refs 键有空对象。
是使用 HOC 创建的 SingleCard 还是来自 redux 的连接组件
No TouchableOpacity 不是 HOC。
@Balasubramanian，不建议在 render 中使用箭头函数。你可以看看这个stackoverflow.com/questions/45053622/…。
如果有帮助，请考虑对答案进行投票以避免在渲染中绑定