reactjs - 如何使用 recompose 的 toClass HOC 向功能组件添加引用？

Question

我正在尝试向 React Native 中的功能组件添加引用，以便在 FlatList 组件上使用scrollToEnd。

我想为此使用 recompose，正如他们的文档所述， toClass() 应该能够处理这个问题。但是，没有给出示例。

目前，这是我失败的实现。有人可以告诉我我做错了什么吗？

我将不胜感激!

import React from 'react';
import PropTypes from 'prop-types';
import { FlatList, View, Text } from 'react-native';
import { graphql } from 'react-apollo';
import { compose, toClass, lifecycle } from 'recompose';

import CommentItem from './CommentItem';
import { commentsQuery } from '../../queries/comments';

const CommentScreen = ({ onRef, currentUser, data: { comments, loading } }) => {
  if (loading) {
    return (
      <View>
        <Text>Loading...</Text>
      </View>
    );
  }

  return (
    <FlatList
      ref={ref => {
        this.refs.commentList = ref;
      }}
      data={comments}
      keyExtractor={item => item.id}
      renderItem={({ item }) => <CommentItem {...item} currentUser={currentUser} />}
    />
  );
};

export default compose(
  toClass,
  graphql(commentsQuery),
  lifecycle({
    componentDidMount() {
      console.log('PROPZZZ', this.commentList);
    },
  }),
)(CommentScreen);

CommentScreen.propTypes = {
  fetchComments: PropTypes.func.isRequired,
  updateId: PropTypes.number.isRequired,
  comments: PropTypes.arrayOf(Object),
  text: PropTypes.string.isRequired,
};

Answer 1

如果需要使用ref，只需使用类组件而不是函数组件。但是，如果由于某些原因需要使用功能组件，则可以使用 withHandlers。使用方法请参见this SO question的回答。