Question

我目前正在开发React应用，而且我需要在屏幕上实现当元素位于屏幕上某个位置（在某些offsetTopValue上）时发生的更改，这应该动态完成，因为每个元素都有一个动态创建的唯一ID。（它在层次结构中还包含3个purecompenet和2个功能组件并且大多数道具都是通过上下文传递的）

index.jsx

class Collection extends Component {
     <CollectionContext.Provider
      value={{state: this.state, cards: this.props.cards...}}>
      .......
      ideal: (
        <CollectionLayout cards= {this.props.cards ..../>
        .......
        </CollectionContext.Provider>
       }

layout.jsx

componentDidMount () {
  this._bindScroll();
}
_handleScroll = () => {
  var html = document.documentElement;
  this.updateCardsPositions();
}
render(
  ...
return(
    <CollectionContext.Consumer>
    {context =>
    <Loader
    randomSpin= {this.props.randomSpin}
    currentTopic = {this.props.currentTopic}
  />}
   <CollectionContext.Consumer>
 );
)

loader.jsx

export const Loader = ({ randomSpin, currentTopic}) => (
.....
  {!context.state.spinning &&
    context.cards.map((card, index) => <Card key={index} card=
{card}/>)}

cards.jsx

export const Card = ({ card } **id={card.id}**) => {
   return (...);
}

我所拥有的：我有一个唯一的卡ID，该ID传递给每张卡，我可以访问布局中的卡片ID。

我尝试使用裁判，但仍不确定正确的方法通过所有这些组件并在ComponentDidMount（）中访问它在布局中。

我尝试利用上下文，但是只能在render内部访问，而不能在componentDidMount上访问。

我也不确定如何使用refs回调：（{（el）=> {inputRef = el}}）和动态值（每张卡都有唯一的ID，应予以引用。

关于如何从布局中获取偏移顶部值的任何其他建议将有所帮助。

我将不胜感激，也为您提供了一般的解决方案指南。

谢谢！

React：获取offsetTop值并动态访问DOM

0 个答案: