IT技术 - 无法使用 ref 调用连接 redux 组件上的子方法 - 吾爱随笔录

无法使用 ref 调用连接 redux 组件上的子方法

IT技术 reactjs react-native react-redux parent-child ref

2021-05-20 01:45:17

我想SingleCard在renderHiddenItem. 我已经分配了不同的裁判对每个名字renderItem。但是当我调用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

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

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

this[name].getWrappedInstance()

但最初您需要将其设置{withRef: true}为第四个参数以connect用于SingleCard类似

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

其它你可能感兴趣的问题

上一篇如何使用 drupal 自定义module在 drupal 8 中集成react应用程序？下一篇将 props 从 state 传递给 child