react自学(2)数据传递和更新

1.Props属性:父组件给子组件传值

1.1.方式1:父组件设置属性值

1.1.1.子组件的props属性定义

设置引入title属性,并附值(可以是value,也可以是function)

1.1.2.父组件设置属性值

设置title的值

1.2.方式2:子组件设置默认值

1.3.方式3: 使用json设置Props

子组件

父组件

1.4.属性的类型约束

使用PropTypes进行属性类型约束

父组件如果设置为number类型

会出现下面的报错:

2.实时更新组件数据

这个时候就要用到React的一个方法useState:

import { useState } from "react"

const [state, setState] = useState(
[
	{
		id: 1,
		value: 'aaa'
	},
	{
		id: 2,
		value: 'bbb'
	}
]
);

1.initState是初始化赋值,里面可以是array或者map.
2.state 这个不是固定的必须是state,可以是自定义的.
3.state作为变量,提供其他方法, 或子组件的调用
4.setState为方法,可以对state变量进行实时数据更新,如下:

const changeFunction = (id, newValue) => {
	setState(state.map((item) => item.id === id ? { ...item, value: newValue } : item));
}

const deleteFunction = (id, newValue) => {
	setState(state.filter((item) => item.id !== id ));
}