react实现父子组件的通信

父组件中定义一个回调函数，并将这个回调函数作为参数传递给子组件，子组件的某个事件被触发后，子组件会调用这个回调函数，并将数据作为参数传递给父组件。

• 怎么判断组件是父组件还是子组件？

  引用组件的是父组件，被引用的组件是子组件。

• 回调函数是什么？

  回调函数是某个函数执行完毕后，通过函数将另一个函数传递给它，并在执行完毕后调用该函数的一种机制。

export interface DeviceCardInterface {
  data: any;
  style?: Record<string, unknown>;
  // 改变名称触发
  onNameChange: (value: string, key: string) => void;
}
const handleNameKeyDown = (e: any) => {
    const dataValue = e.target.value;
    // 当前名称与传入名称不一致时才通知父组件更新
    if (dataValue !== data.name) {
      onNameChange(dataValue, data?.nid);
    }
    setName(e.target.value);
  };

子组件DeviceCard接受三个参数 其中onNameChange就是回调函数，被作为参数传递

<DeviceSelectCard
  key={item.nid}
  data={item}
  onNameChange={(value, key) => {
    handleComfirmEdit(value, key);
  }}
/>;

每当子组件中触发了handleNameKeyDown函数后，当这个函数执行完毕后，就会调用回调函数onNameChange，后续执行父组件回调函数中的函数handleComfirmEdit。

另一个例子：

//子组件中的某一个点击事件
<DccButton
  type={DccButtonType.default}
  onClick={() => {
    onClickGroupManage && onClickGroupManage();
  }}
></DccButton>;

//父组件
<DeviceIndex
  onRef={listRef}
  onClickGroupManage={async () => {
    await (listRef.current as any).confirmBatchControlAndModifyName();
    collectEvent('button_click', {
      page: '设备管理',
      btn_name: '设备管理-室内机【设备分组】',
    });
    resetGroupSetting(true);
  }}
/>;

这个例子同样也是通过属性向子组件传递回调函数 从而实现父组件调用子组件的方法，改变子组件的状态。