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

2024-04-03

我想打电话SingleCard子组件方法renderHiddenItem。我分配了不同的ref每个的名字renderItem。但当我打电话时这个名字, it is 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>
            );
          }
        }}
      />

Update:我想触发一些在 singleCard 组件中编写的操作。需要调用它renderHiddenItem.

像这样:

this.childRef0.someMethod
this.childRef1.someMethod

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

<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 创建的组件上connect from react-redux,大多数库都提供了一种称为getWrappedInstance获取实际组件的引用而不是connect成分。你可以像这样使用它

this[name].getWrappedInstance()

但最初你需要设置{withRef: true}作为第四个参数connect被用于SingleCard like

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

你可以在这里读更多关于它的内容

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

无法使用 ref 调用 connect redux 组件上的子方法 的相关文章

随机推荐