Taro 中父组件传多个值到子组件, 不同页面传值， 子组件修改父组件值

Posted 2021-03-07 小短腿奔跑吧

1.父子组件传值需借助 中间ts文件

hook/context-manager.tsx

// 使用hook给父子组件共享数组

import { createContext } from "@tarojs/taro";

export default createContext({});

　　

2.父组件

import TripContext from ‘../../hook/context-manager‘
import Trip_success from ‘../../components/trip_success/index‘

function Home() {
    const [content, setContent] = useState({})
　　 const [contentType, setContentType] = useState(false)

return (
　　<View>{contentType} 
　　　　<TripContext.Provider value={{ content, urlName: ‘home‘,setContentType}}>

　　　　　　<Trip_success /> 
　　　　</TripContext.Provider>
　　</View>
 ) 
}

　　

3.子组件

import TripContext from ‘../../hook/context-manager‘
import Taro, { useContext, useEffect } from "@tarojs/taro";

function Trip_success() {

  const { content, urlName, setContentType } = useContext(TripContext)

　useEffect(() => {setContentType(true)})

  console.log(‘获取父组件中值‘, content, urlName)
}