поместил div между компонентом StickyContainer, чтобы сделать его липким

Question

• Я пытаюсь сделать div липким в реакции.
• поэтому я включил пакет реагировать-липкий.
• и поместил div между компонентом StickyContainer.
• Я не вижу никаких ошибок, но все еще не работает.
• Можете ли вы сказать мне, как это исправить, чтобы в будущем я исправил это сам.
• Предоставление моей песочницы и фрагмента кода ниже.

https://codesandbox.io/s/0prxxxvy0n

class App extends React.Component {
  render() {
    console.log("App---->");
    return (
      <StickyContainer>
        {/* Other elements can be in between `StickyContainer` and `Sticky`,
        but certain styles can break the positioning logic used. */}

        <div>
          I am sticky------------------------------------------------------->
        </div>

        <Sticky>
          {({
            style,

            // the following are also available but unused in this example
            isSticky,
            wasSticky,
            distanceFromTop,
            distanceFromBottom,
            calculatedHeight
          }) => <header style={style}>{}</header>}
        </Sticky>
        <SearchBar />
        <div>I am sticky</div>
        <WholeText />
        <UploadDocuments />
        <VerticalLinearStepper />
        {/* ... */}
      </StickyContainer>
    );
  }
}

Answer 1

Как сказано в документации, вам нужно поместить ваш div в функцию обратного вызова рендеринга компонента, т.е.

class App extends React.Component {
  render() {
    console.log("App---->");
    return (
      <StickyContainer>
        <Sticky>
          {({ style }) => <div style={style}>I am sticky</div>}
        </Sticky>
        <SearchBar />
        <div>I am sticky</div>
        <WholeText />
        <UploadDocuments />
        <VerticalLinearStepper />
        {/* ... */}
      </StickyContainer>
    );
  }
}

«Обратный вызов рендеринга» в данном случае просто означает, что дочерний элемент компонента <Sticky> должен быть функцией, которая возвращает то, что должно быть отображено. Это позволяет родителю передавать дополнительную информацию для использования при рендеринге потомка через аргументы функции. Синтаксис для указания функции как дочернего элемента:

<Parent>{/*function goes here*/}</Parent>

В приведенном выше примере функциональной частью является ({ style }) => <div style={style}>I am sticky</div>, в которой предполагается, что параметр, который будет передан функции, будет объектом со свойством style, а затем функция возвращает элемент div с использованием этого стиля.

Если вы посмотрите на реагирующий код , вы обнаружите, что в его методе render он выполняет следующее:

  const element = React.cloneElement(
      this.props.children({
        isSticky: this.state.isSticky,
        wasSticky: this.state.wasSticky,
        distanceFromTop: this.state.distanceFromTop,
        distanceFromBottom: this.state.distanceFromBottom,
        calculatedHeight: this.state.calculatedHeight,
        style: this.state.style
      }),
      {
        ref: content => {
          this.content = ReactDOM.findDOMNode(content);
        }
      }
    );

Когда он вызывает this.props.children(...), он выполняет функцию, указанную вами как дочернюю, и вы видите, что последнее свойство объекта, которое она передает функции, является свойством style.