如何使用recompose的toClass HOC将ref添加到功能组件？

Question

我正在尝试在React Native中添加一个函数组件的ref,以便在FlatList组件上使用scrollToEnd.

我想使用重构为此,并且正如他们的文档所述,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. 请参阅此问题的答案以了解如何使用它。