入门React第二天（函数式组件传值）

Posted 2022-03-10 岁月可贵

常规传值

• 父 =》子

import React,  useState  from 'react'

function Child(props) 
    return <h2>子组件props.num</h2>

export default function Father() 
  return <Child num=123/>

• 子 =》父

function Child(props) 
    return (
       <>
         <h2>子组件props.num</h2>
         <button onClick=()=>props.changeNum(321)></button>
       </>
    )

export default function Father() 
  const [num, setNum] = useState(123)
  // 提供给子组件用来修改 num 的函数
  const changeNumFn = (num) => setNum(num)
  return <Child num=num changeNumFn=changeNum/>

跟 Vue 不同的地方是：

• 父传子没太大区别
• 子传父：
  • Vue 是通过触发器将值传出，父组件对子组件进行监听
  • React 是将处理函数传递给子组件

跨代传值

import React,  useState, createContext  from 'react'

// 创建上下文空间 （Provider 提供者，Consumer 消费者）
const NumContext = createContext()

function Child() 
     return (
         <NumContext.Consumer>
            
              (num, setNum)=>
                  return (
                     <>
                       <h2>子组件num</h2>
                       <button onClick=()=>setNum(456)>修改Num</button>
                     </>
                  )
                   
            
         </NumContext.Consumer>
     )


const Father() => <Child />

// 顶级组件
export default function App() 
    const [num, setNum] = useState(123);
    return (
        <NumContext.Provider value=num, setNum>
             <Father>
        </NumContext.Provider>
    )

可以使用 hooks 优化

import React,  useState, createContext, useContext  from 'react'

// 创建上下文空间 （Provider 提供者，Consumer 消费者）
const NumContext = createContext()

function Child() 
    const  num, setNum  = useContext(NumContext);
     return (
          <>
            <h2>子组件num</h2>
            <button onClick=()=>setNum(456)>修改Num</button>
          </>
     )


const Father() => <Child />

// 顶级组件
export default function App() 
    const [num, setNum] = useState(123);
    return (
        <NumContext.Provider value=num, setNum>
             <Father>
        </NumContext.Provider>
    )