Question

我有很长的项目列表，当他们渲染时，我希望滚动移动到列表的底部 - 但只有当它们渲染时。有没有人知道如何使用无状态组件执行此操作？我想要一个函数作为组件的prop运行，我希望这个函数传递元素，以便在我的容器组件中使用Redux API我可以滚动到该元素。但是，我只希望函数在组件呈现时运行，并且我很难在组件上运行时获取一个函数，当它以自身的形式作为参数进行渲染时。

我熟悉关于组件生命周期的类组件中的这些事件：

componentWillReceiveProps（）
shouldComponentUpdate（）
componentWillUpdate（）
componentDidUpdate（）
渲染（）

但在无状态组件中，我无法使用这些生命周期事件。

Answer 1

无状态功能组件没有生命周期，因为它是荒谬的。 React生命周期本质上是有状态的。

您有几个选择：

将无状态函数组件转换为类组件以使用生命周期方法。
将无状态功能组件包装在更高级别的组件中，以提供所需的生命周期管理。请查看recompose及其提供的lifecycle高阶组件。

Answer 2

根据您的上一条评论，您可以像这样解决您的用例： https://jsfiddle.net/69z2wepo/83446/

在列表组件中，您可以在componentWillMount：

中添加它

componentWillReceiveProps(newProps) {
    if (!this.props.comments.length && newProps.comments.length) {

      // Using setTimeout 0 will cause the function to be triggered after the re-render
      setTimeout(() => {

        // this.list being a ref on the list component 
        const { height } = this.list.getBoundingClientRect();
        document.body.scrollTop = height;
      }, 0);
    }
  }

在这种情况下，Comment组件可以是无状态的

function Comment(props) {
  return (
    <li>{props.comment.content}</li>
  );
}

无状态组件prop函数在呈现时如何运行？

2 个答案: