Реагировать + реагировать-пересечение-наблюдатель Невозможно установить новый `options.root`

Пытаюсь использовать последнюю версию React.

Я пытаюсь использовать задокументированный options, чтобы установить новый root для механизма вычисления пересечений. Проблема в том, что он отклоняет мой новый рут

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

Я передаю ему ссылку на React, которую я создал в компоненте React-предке, и передал ее ему через props и установил props в элементе <IntersectionVisible> следующим образом:

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

это я получаю это предупреждение?


reactjs intersection-observer
person JasonGenX    schedule 06.08.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ: Я не пользовался библиотекой, но ответ основан на источнике сборника рассказов.

Вам нужно передать сам 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>
    )
  }
}
person dance2die    schedule 06.08.2019
comment
Это синтаксис Typescript или что-то в этом роде? Функция handleNode приводит к синтаксическим ошибкам при построении на ES6 / - person JasonGenX; 06.08.2019
comment
Да, написано машинописным шрифтом. Это то же самое, что handleNode = (node) => { this.setState({ node }) } в javascript. Это старый способ назначения ссылки, который называется Ссылка обратного вызова . В настоящее время вы просто создаете ссылку, используя React.createRef (для компонентов класса) и React.useRef (для компонентов функций). - person dance2die; 06.08.2019