javascript - 在父组件 componentDidMount 完成后渲染子组件

Question

我有一个正在尝试使用的第三方库。它有一个特殊的 Prop ，允许您传入一个字符串，它用于获取 DOM 元素并返回底部值。

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

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

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

无论粘性元素的高度是多少，我都需要添加一个偏移量。因此，假设“#some-id”元素为 1200px，粘性元素的高度为 50，我需要能够获取“#some-id”并在将值传递给 bottomBoundary={} 之前减去 50 .我的计算值是 bottomBoundary={1150}。

我尝试了以下方法。我创建了一个包装 Sticky 的组件，如下所示:

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 组件中。明显的问题是 Sticky 组件试图在包装器组件完成计算之前找到该值。

有没有办法优雅地做到这一点。我对 react 还很陌生，所以任何可以学习的文章或文档都是一个加号。

谢谢。

Answer 1

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

this.state.boundary 与 this.boundary

1. 将边界值放入组件的状态将帮助您重新呈现其任何更改(即 setState 调用)。
2. 虽然仅当值不应影响渲染结果时才应使用普通类字段。

代码如下:

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