Javascript 将div放置在StickyContainer组件之间以使其具有粘性 我在试着让一张桌子黏黏的 所以我把包裹放进去了 并将div放置在StickyContainer组件之间 我没有看到任何错误，但它仍然不起作用 你能告诉我怎么修吗？这样以后我会自己修的 下面提供我的沙盒和代码片段

类应用程序扩展了React.Component{
render（）{
console.log（“App-->”）；
返回(
{/*其他元素可以介于“StickyContainer”和“Sticky”之间，
但是某些样式可能会破坏所使用的定位逻辑。*/}
我粘乎乎的----------------------------------------->
{({
风格
//以下内容在本例中也可用，但未使用
isSticky，
太粘了，
距离顶部，
与底部的距离，
计算高度
}) => {}}
我粘乎乎的
{/* ... */}
);
}
}

如文档所述，您需要将div放入组件的render回调中，即

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>
    );
  }
}

---

当它调用

this.props.children（…）

时，它将执行您指定为子函数的函数，您可以看到它传递给该函数的对象上的最后一个属性是

style

属性。

嘿，感谢它的工作……您能告诉我为什么要调用渲染回调吗，如果你解释的话，你会怎么说呢？因为在采访中，我可以用一个例子来解释，因为文档告诉我要这么做。严肃地说：“

react sticky

通过计算

组件相对于

组件的位置来工作。如果它在视口之外，则将其粘贴到屏幕顶部所需的样式作为参数传递给渲染回调，即作为子级传递的函数。”你能告诉我你是如何看待代码并以回调的方式告诉它的吗？

{（{style}）

老实说，这是我第一次“在野外”遇到它。这里有一些进一步的阅读：（参见渲染道具部分）还有@nossr我已经更新了markmoxx的答案，对“渲染回调”有了更全面的解释“我是粘性的，只要它在组件内部就可以工作。@BorisPovolotsky你能告诉我你是如何看到代码并以回调方式告诉它的”

{（{style}）

@BorisPovolotsky这不是真的，它需要从sticky组件向sticky内容传递一个style prop，因此需要在呈现回调中。@markmoxx所以呈现方法中的return方法形成回调？@nossr不要太在意“回调”这个词，这正是sticky文档所称的。t嘿，你通常被称为。你有没有可能把我的答案标记为接受？

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>
    );
  }
}

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

  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);
        }
      }
    );