Question

我想在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

Answer 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实例connect创建的组件使用react-redux时，大多数库都提供了一个名为getWrappedInstance的方法来获取实际组件的ref而不是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

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

1 个答案: