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`

1 个答案: