react hooks 父子传值

react hooks 父子传值

父传子

• 在父组件中用useState声明数据

 const [ data, setData ] = useState(false)

• 把数据传递给子组件

<Child data={data} />

• 子组件接收

export default function (props) {
	const { data } = props
	console.log(data)
}

子传父

子传父可以通过事件方法传值，和父传子有点类似。

• 在父组件中用useState声明数据

 const [ data, setData ] = useState(false)

• 把更新数据的函数传递给子组件

<Child setData={setData} />

• 子组件中触发函数更新数据，就会直接传递给父组件

export default function (props) {
	const { setData } = props
	setData(true)
}

• 如果存在多个层级的数据传递，也可依照此方法依次传递