当前位置：文江博客话题详情

在React中渲染组件

发布于 2025-01-24 06:41:05 字数 197 浏览 4 评论 0原文

我有两个组件。组件 a 和组件 b 。我想在组件 a 完全渲染后渲染组件 b 。我使用useeffect和uselayouteffect挂钩，但是这些对我没有帮助。您的解决方案是什么？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

溺孤伤于心 2025-01-31 06:41:05

渲染组件 a uselayouteffect 和组件 b

useEffect(() => {}, [])

i特别喜欢 反应lazy lazy loading 组件

Render component A with uselayoutEffect and component B with

useEffect(() => {}, [])

I specifically prefer React Lazy Loading components

回复收藏 0 原文

半世蒼涼 2025-01-31 06:41:05

下面的示例是使用使用>使用进行工作。一旦呈现＆lt; app /＆gt; < /code>，这意味着＆lt; componenta /＆gt; < /code>是因为它是其子女之一，因此我们可以使用使用使用更新状态并渲染＆lt; componentb/＆gt;：

const { useState, useEffect } = React

function ComponentA() {
  return <div>A</div>
}

function ComponentB() {
  return <div>B</div>
}

function App() {
  const [componentALoaded, setComponentALoaded] = useState(false)
  useEffect(() => {
    setCompALoaded(true)
  }, [])

  return (
    <div>
      <ComponentA />
      {componentALoaded && <ComponentB />}
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById("root"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="root"></div>

但是，如果您想使用很多组件进行此操作，这可能不是很有效。

The following example is working using useEffect. Once <App /> is rendered, that means <ComponentA /> is rendered because it is one of its children, so we can use useEffect to update the state and render <ComponentB />:

const { useState, useEffect } = React

function ComponentA() {
  return <div>A</div>
}

function ComponentB() {
  return <div>B</div>
}

function App() {
  const [componentALoaded, setComponentALoaded] = useState(false)
  useEffect(() => {
    setCompALoaded(true)
  }, [])

  return (
    <div>
      <ComponentA />
      {componentALoaded && <ComponentB />}
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById("root"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="root"></div>

However, it may not be very efficient if you want to do this with a lot of components.

回复收藏 0 原文

~没有更多了~