1

尝试使用最新的 React 的 react-intersection-observer。

我正在尝试使用文档为交叉计算引擎options设置一个新的。root问题是，它拒绝了我的新根

Warning: Failed prop type: Invalid prop `options.root` supplied to `IntersectionVisible`, expected a ReactNode.

我将我在祖先 React 组件中创建的 React ref 交给它，并通过 props 将其传递给它，并将<IntersectionVisible>元素中的 props 设置为：

options={{root: this.props.myref.current}}

这是我收到这个警告吗？

4

1 回答 1

1

免责声明：我没有使用图书馆，但答案是基于故事书的来源。

您需要传递ref本身（this.props.myref），而不是底层 DOM 元素this.props.myref.current。

所以不是传递 DOM，

options={{root: this.props.myref.current}}

传递参考本身。

options={{root: this.props.myref}}

我找到了一本故事书，你可以在里面看到root={node}。
https://github.com/thebuilder/react-intersection-observer/blob/master/stories/InView.story.tsx#L145

    <RootComponent>
      {node => (
        <ScrollWrapper>
          <InView
            threshold={0}
            // .. 
            root={node}
            onChange={action('Child Observer inview')}
          >
            {({ inView, ref }) => (
              <Header ref={ref} inView={inView}>
                Header is inside the root viewport: {inView.toString()}
              </Header>
            )}
          </InView>
        </ScrollWrapper>
      )}
    </RootComponent>

并node指向引用本身。
https://github.com/thebuilder/react-intersection-observer/blob/master/stories/Root/index.tsx#L29

class RootComponent extends React.PureComponent<Props, State> {
  state = {
    node: null,
  }

  handleNode = (node: HTMLElement | null) => {
    this.setState({
    //  this is a ref to `div` below.
      node,
    })
  }

  render() {
    return (
                      
      <div ref={this.handleNode} style={{ ...style, ...this.props.style }}>
        {/*
        // @ts-ignore */}
        {this.state.node ? this.props.children(this.state.node) : null}
      </div>
    )
  }
}
于 2019-08-06T19:28:24.217 回答