11

我正在尝试向 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,
};
4

2 回答 2

0

如果您需要使用ref. 但是，如果由于某些原因需要使用功能组件，则可以使用withHandlers. 请参阅此 SO question的答案以了解如何使用它。

于 2017-10-05T02:47:21.300 回答
0

我将粘贴一些我设法解决类似问题的代码，我知道这不完全是您的代码，但它显示了解决方案：

import React from 'react'
import { compose, withState, withHandlers, lifecycle } from 'recompose'

import Left from './Left'
import Right from './Right'
import Modals from './Modals'
import { ActionBar, Container } from './styles'

let ref = null

const enhance = compose(
  withState('position', 'setPos', 'relative'),
  withHandlers({
    isTop: ({ setPos }) => () => {
      const { top } = ref && ref.getBoundingClientRect()
      top && setPos(top <= 0 ? 'fixed' : 'relative')
    },
  }),
  lifecycle({
    componentDidMount() {
      window.addEventListener('scroll', this.props.isTop)
    },
    componentWillUnmount() {
      window.removeEventListener('scroll', this.props.isTop)
    },
  })
)

export default enhance(({ position, ...props }) => (
  <Container innerRef={el => (ref = el)}>
    <ActionBar position={position}>
      <Left {...props} />
      <Right {...props} />
      <Modals {...props} />
    </ActionBar>
  </Container>
))

正如您所看到的，这里的关键是将 存储ref在一个变量中并使用withState++的withHandlers混合lifecycle来使其工作，我最终不需要使用toClassHoC 因为只要您使用您的任何其他 HoC就recompose已经在下面使用 React 组件类:)

希望能帮助到你！

于 2018-09-26T11:05:04.047 回答