Reactjs在其他组件之前呈现组件

Reactjs render component before other components

本文关键字：组件 其他 Reactjs      更新时间：2023-09-26

我如何指定一个组件应该绝对在任何其他组件之前呈现?

我想指定<Footer />和footer的所有子组件应该在任何其他组件之前呈现。我想要这样做的原因是因为我的代码取决于页脚渲染的html，这意味着对<Footer />的引用是undefined在其他组件中，如果<Footer />不首先渲染。

下面是一个例子:

export default class Layout extends React.Component {
    ...
    render(){
        return (
            <Body />
            <Footer /> //Render first
        );
    }
}

我认为你这样做的唯一方法是:

  • 在状态中提供关于页脚呈现状态的信息。(让我们假设你的名字是isFooterRendered，它是一个布尔值)
  • 初始状态下设置isFooterRendered为false
  • 当isFooterRendered是true时，你只渲染子组件
  • 在componentDidMount 中，您将有一个对页脚的引用，将isFooterRendered设置为true。

(有些人声称componentDidMount上的setState不好，但在你的情况下看起来像一个合法的用例，除了React Docs暴露了一个类似的例子)

相关文章：