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

我有一个很长的项目列表，当它们渲染时，我希望滚动移动到列表的底部 - 但只有当它们呈现时。有没有人知道如何用无状态组件做到这一点？我想要一个函数作为组件上的道具来运行，我希望这个函数传递这个元素，以便在带有Redux API的容器组件中，我可以滚动到该元素。但是，我只想在组件呈现时运行该函数，并且我正努力在组件运行时将其自身作为参数传递时运行。无状态组件道具函数在呈现时如何运行？

我所熟悉的关于组件的生命周期，这些事件在类成分：）））

componentWillReceiveProps（）
shouldComponentUpdate（
componentWillUpdate（
componentDidUpdate（
render（）

但是这些生命周期事件在无状态组件中不适用于我。

来源

2017-07-21 robertjewell

无状态功能组件没有生命周期。 –

所以你有一个容器组件与独立的项目？项目组件是否有scrollTo方法，或者具体到底是什么意思？ – dejakob

@dejakob比方说，我有一个评论容器和一个评论组件。评论组件从其评论容器接收评论集合，并且针对每条评论调用评论组件，该评论组件在调用评论组件时已经通过评论组件需要的来自Redux的状态。当评论列表完成呈现时，我希望UI滚动到列表的底部。 – robertjewell

无状态功能组件没有生命周期，因为这是无意义的。 React生命周期本质上是有状态的。

你有几种选择：

转换无状态的功能组件类组件来使用的生命周期方法。
将无状态功能组件包装在提供您所需生命周期管理的更高阶组件中。看看它提供的recompose和lifecycle高阶组件。

来源

2017-07-21 22:58:36

根据您最后的评论，你可以解决你的使用情况是这样的： 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); 
    } 
    }

在这种情况下，评论组件可能是无状态的

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

来源

2017-07-24 15:36:54 dejakob

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

回答

相关问题