react组件通信

1. 父子组件

1.1 react子组件向父组件传递事件

父组件

const parent= (props) => {
  const add = (){}
  // addComplete 是传递给子组件执行的事件，所以当在子组件里面执行addComplete时就会执行这里对应的事件add
  <Son addComplete={() => add}></Son >
}

子组件

const Son = (props) => {
	// 接收父组件传递来的 addComplete 事件
	const { visible, setVisible, addComplete} = props
	
	// 子组件的添加事件
	const handleOk= ()=>{
		// 执行父组件传递来的 addComplete 事件
		addComplete()
	}
	<Button onClick={handleOk}>确定</Button>
  }

1.2 react子组件接收父组件传来的属性并修改

父组件

const parent= (props) => {
  // 传递给子组件的属性
  const [visible, setVisible] = useState(false)
  <Son setVisible={setVisible} visible={visible}></Son>
}

子组件

const Son = (props) => {
	// 接收父组件传递来属性
	const { visible, setVisible} = props
	const handleCancel= ()=>{
		// 设置父组件传递来的属性
		setVisible(false)
	}
	<Button onClick={handleCancel}>取消</Button>
  }