reactjs – 如何使用重构的toClass HOC将ref添加到功能组件?

前端之家收集整理的这篇文章主要介绍了reactjs – 如何使用重构的toClass HOC将ref添加到功能组件?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试在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,};
如果需要使用ref,只需使用类组件而不是功能组件.但是,如果由于某些原因需要使用功能组件,则可以使用withHandlers.有关如何使用它,请参阅 this SO question的答案.
原文链接:https://www.f2er.com/react/300971.html

猜你在找的React相关文章