React + react-intersection-observer -- 无法设置新的 `options.root`

Question

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

我正在尝试使用记录的 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}}

这是我收到的警告吗？

Answer 1

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

您需要传递 ref 本身 (this.props.myref)，而不是基础 DOM 元素 this.props.myref.current.

所以不要传递 DOM，

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

传递引用本身。

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

我找到了一个 story book，其中你看到 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>
    )
  }
}

React + react-intersection-observer -- 无法设置新的 `options.root`

React + react-intersection-observer -- Impossible to set a new `options.root`

reactjs

intersection-observer