reactjs - 如何在 React 中获取渲染的 JSX？

Question

想象一个Container组件，它渲染一个具有指定高度的div，例如:

<Container height="80">
  Hello World
</Container>

和 MyHeader 组件，渲染具有特定高度的Container，例如:

function MyHeader() {
  return (
    <Container height="100">
      Header content goes here
    </Container>
  );
}

现在，我想实现一个如下所示的 Fixed 组件:

<Fixed>
  <Fixed.Item>
    <MyHeader />
  </Fixed.Item>
  <Fixed.Content>
    Some content goes here
  </Fixed.Content>
</Fixed>

渲染 Fixed.Content 时，我想自动将其偏移设置为 100px(因为 MyHeader 的高度为 100px)。

有没有办法让 Fixed 组件获取 MyHeader 的 height 以便将其传递给 Fixed.Content ？

是否有更好的方法来自动化此操作？

注意:使用useEffect(或componentDidMount)不是一个选项，因为我希望它在服务器渲染环境中工作。

Answer 1

通常，您希望数据从 parent 流向 child 。如果这不适合您，您可以使用上下文:https://reactjs.org/docs/context.html 。特别查看https://reactjs.org/docs/context.html#updating-context-from-a-nested-component 。在您的情况下， MyHeader 可能是您上下文的 Consumer 并用其高度更新它，并且 Fixed.Content 也将是一个消费者使用该值作为其偏移量。但总的来说，我想说你想做的事情有点不自然。