React Hooks 兄弟组件之间传参以及How to fix...报错

vermouthyyj

已于 2022-05-19 00:41:23 修改

阅读量429

点赞数 1

文章标签： react.js vue.js 前端

于 2022-05-19 00:34:21 首次发布

本文链接：https://blog.csdn.net/vermouthyyj/article/details/124854302

版权

父组件 -- <App />

子组件1 -- <Header />

子组件2 -- <Body />

需求：在子组件1中更新user的值，子组件2渲染相应的数值

父子组件之间传参：通过props传递

兄弟组件：子组件1通过参数方法穿参给父组件，父组件再通过props传递给子组件2

// App.js
import React from "react"
import Header from "./Header"
import Body from "./Body"

export default function App() {
    const [user, setUser] = React.useState("")
    
    const handleUser = (user) => {
        setUser(user)
    }

    return (
        <main>
            <Header handleUpdate={handleUser}/>
            <Body user={user}/>
        </main>
    )
}

// Header.js
import React from "react"

export default function Header(props) {
    
    /**
     * Challenge:
     * Raise state up a level and pass it down to both the
     * Header and Body components through props.
     */
    const user = "Name1"
    // 将value传给副组件
    React.useEffect(() => {
        props.handleUpdate(user)
    }, [user])
    
    return (
        <header>        
            <p>Current user: {user}</p>
        </header>
    )
}

// Body.js
import React from "react"

export default function Body(props) {
    return (
        <section>
            <h1>Welcome back, {props.user}!</h1>
        </section>
    )
}

useEffect的作用: 只有当<Header />组件中user值发生变化才会触发props.handleUpdate. 否则console会有 “How to fix the "cannot update a component while rendering a different component" error in React” 报错

vermouthyyj

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React Hooks 兄弟组件之间传参以及How to fix...报错

父组件 -- <App />子组件1 -- <Header />子组件2 -- <Body />需求：在子组件1中更新user的值，自组件2渲染相应的数值父子组件之间传参：通过props传递兄弟组件：子组件1通过参数方法穿参给父组件，父组件再通过props传递给子组件2// App.jsimport React from "react"import Header from "./Header"import Body from "./Bo
复制链接

扫一扫