javascript - 将 div 放在 StickyContainer 组件之间以使其具有粘性

Question

• 我正在尝试使一个 div 在 React 中具有粘性。
• 所以我包含了 react-sticky 包。
• 并将 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 元素。

如果您查看 react-sticky code你会在它的 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属性(property)。