Javascript 在父组件componentDidMount完成后渲染子组件

我有一个第三方图书馆我试图使用。它有一个特殊的属性，允许您传入它用来获取DOM元素并返回底部值的字符串

<Sticky bottomBoundary="#some-id">
    <MyChildComponentMightBeANavigationOrAnything />
</Sticky>

组件获取id并确定底部值，以便知道何时从粘滞状态释放自己。这个id基本上是DOM中的另一个元素。因此，当元素底部的值到达视图端口的顶部时，粘滞组件可以随着用户滚动而向上移动。我遇到的问题是我需要添加一个偏移量。粘性组件允许您传入一个数值

<Sticky bottomBoundary={1200}>
    <MyChildComponentMightBeANavigationOrAnything />
</Sticky>

我需要添加粘性元素高度的偏移量。假设“#someid”元素是1200px，粘性元素的高度是50，我需要能够得到“#someid”并减去50，然后将值传递到bottomBoundary={}。我的计算值将是bottomBoundary={1150}

我尝试了以下方法。我创建了一个包裹粘性的组件，如下所示：

export class WrapperSticky extends React.Component {

    constructor(props) {
        super(props);

        this.boundary = null;
    }

    componentDidMount() {
        const el = document.querySelector(this.props.bottomBoundary);
        const rect: any = el.getBoundingClientRect();
        this.boundary = rect.bottom - 50;

        console.log(this.boundary);
    }

    render() {
        return (
            <Sticky innerZ={2000} bottomBoundary={this.boundary}>{this.props.children}</Sticky>
        );
    }
}

<WrapperSticky bottomBoundary="#hero" offset={true}>
    <MyChildComponentMightBeANavigationOrAnything />
</WrapperSticky >

export-class-wrapper.Component{
建造师（道具）{
超级（道具）；
this.boundary=null；
}
componentDidMount（）{
const el=document.querySelector（this.props.bottomBoundary）；
const rect:any=el.getBoundingClientRect（）；
this.boundary=rect.bottom-50；
console.log（this.boundary）；
}
render（）{
返回(
{this.props.children}
);
}
}

我添加了如下标记：

export class WrapperSticky extends React.Component {

    constructor(props) {
        super(props);

        this.boundary = null;
    }

    componentDidMount() {
        const el = document.querySelector(this.props.bottomBoundary);
        const rect: any = el.getBoundingClientRect();
        this.boundary = rect.bottom - 50;

        console.log(this.boundary);
    }

    render() {
        return (
            <Sticky innerZ={2000} bottomBoundary={this.boundary}>{this.props.children}</Sticky>
        );
    }
}

<WrapperSticky bottomBoundary="#hero" offset={true}>
    <MyChildComponentMightBeANavigationOrAnything />
</WrapperSticky >

在WrapperSticky中，我尝试使用componentDidMount方法进行计算，并将结果传递给Sticky组件。明显的问题是，粘性组件试图在包装器组件完成计算之前找到值

有没有一种方法可以优雅地做到这一点。我是一个新的反应，所以任何文章或文件学习将是一个加分

---

谢谢。

您可以在

wrapperstick

状态下设置一个布尔标志，用于指示您是否已完成计算。它最初为false，并且

render

返回

。在

componentDidMount

中，计算完成后，将标志设置为true，这将触发重新渲染，将子对象渲染为实数。这至少应该是可行的（我已经使用

subpos

state字段做了类似的事情），尽管可能有更好的方法使用一些更高级的生命周期挂钩。

您需要为此使用组件状态。计算完成后-更新状态，使组件使用计算值重新渲染

this.state.boundary

vs

this.boundary

将边界值放入组件的状态将有助于您重新呈现组件的任何更改（即

setState

call）

而仅当值不应影响渲染结果时，才应使用普通类字段

代码如下：

class WrapperSticky extends Component {
  state = {
    boundary: undefined,
  }

  componentDidMount() {
    const el = document.querySelector(this.props.bottomBoundary)
    const rect = el.getBoundingClientRect()
    const boundary = rect.bottom - 50

    this.setState({ boundary })
  }

  render() {
    const { boundary } = this.state

    return boundary === undefined
      ? null // or placeholder
      : (
        <Sticky innerZ={2000} bottomBoundary={boundary}>
          {this.props.children}
        </Sticky>
      )
  }
}

类包装器组件{
状态={
边界：未定义，
}
componentDidMount（）{
const el=document.querySelector（this.props.bottomBoundary）
const rect=el.getBoundingClientRect（）
const boundary=rect.bottom-50
this.setState（{boundary}）
}
render（）{
const{boundary}=this.state
返回边界===未定义
？空//或占位符
: (
{this.props.children}
)
}
}

谢谢。让我看看你的密码。希望有人能为我们共同学习的人做出贡献。