recomposeのtoClass HOCを使用して機能コンポーネントに参照を追加するにはどうすればよいですか？

Question

FlatListコンポーネントでscrollToEndを使用するために、React Nativeの機能コンポーネントにrefを追加しようとしています。

私はこれに対して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

ライフサイクルの中でエレメントにthis.refsからアクセスする必要があります。

lifecycle({ 
    componentDidMount() { 
    console.log('PROPZZZ', this.refs.commentList); 
    //       ^^^^ 
    } 
}) 

あなたはそれがここで働いて見ることができます：あなたはrefを使用する必要がある場合 https://snack.expo.io/Sy-rCBQhW

Answer 2

は、だけではなく、機能コンポーネントのクラスコンポーネントを使用します。ただし、何らかの理由で機能コンポーネントを使用する必要がある場合は、withHandlersを使用できます。使用方法については、this SO questionの回答を参照してください。