react，如何实现A组件调用不相关的B组件里的某个函数？

Question

在使用的react版本如下：

A和B是两个不相关的组件，两者既不是父子，也不是兄弟，也没有共同的父组件
组件A的代码：

import React from 'react'
// import { handleFavorite } from '../../HouseDetail/index'
const Favorite = () => {
  const deleteFavorite = (e) => {
    e.stopPropagation()
    let index = e.target.getAttribute("data-index")
    // handleFavorite()
  }
return (
   <span className={styles.delete} data-index={index} onClick={deleteFavorite}>
      <CloseCircleOutline />
   </span>
)
}

组件B的代码：

import React from 'react'
function HouseDetail() {
  const [isfavorite, setIsfavorite] = useState(false)
  function handleFavorite() {
    if (isfavorite) {
      API.delete(`/user/favorites/${id}`).then(res=>{
      setIsfavorite(false)
    })
  }
return (
// ...
)
}

请问如何才能让B组件里的handleFavorite函数放到A组件里使用，并实现点击A组件里的span即可实现删除功能？请在现有代码基础上展示代码举例说明，谢谢。

Answer 1

ChatGPT将尝试为您解答
一种方法是在组件 A 中引入 B 组件，然后将 B 组件的 handleFavorite 函数作为 prop 传给 A 组件。这样，A 组件就可以在调用 deleteFavorite 函数时调用 handleFavorite 函数。
例如：
组件 A 的代码：

import React from 'react'
import HouseDetail from './HouseDetail'  // 引入 B 组件

const Favorite = (props) => {
  const deleteFavorite = (e) => {
    e.stopPropagation()
    let index = e.target.getAttribute("data-index")
    props.handleFavorite()  // 调用 B 组件的 handleFavorite 函数
  }
  return (
    <span className={styles.delete} data-index={index} onClick={deleteFavorite}>
      <CloseCircleOutline />
    </span>
  )
}

组件 B 的代码：

import React from 'react'

function HouseDetail() {
  const [isfavorite, setIsfavorite] = useState(false)
  function handleFavorite() {
    if (isfavorite) {
      API.delete(`/user/favorites/${id}`).then(res=>{
        setIsfavorite(false)
      })
    }
  }
  return (
    <div>
      // ...
      <Favorite handleFavorite={handleFavorite} />  // 将 handleFavorite 函数作为 prop 传给 A 组件
    </div>
  )
}

这样，当用户点击 A 组件中的 span 时，会调用 deleteFavorite 函数，再调用 B 组件的 handleFavorite 函数，实现删除功能。
另一种方法是使用 Redux 或其他状态管理工具来管理数据，然后在组件 A 和 B 中调用相同的 action。这种方法的优势在于，可以跨组件共享数据和状态，可以更好地管理应用的状态。
首先，需要安装 Redux 和 React Redux：

npm install --save redux react-redux

然后，在应用中创建一个 store，并使用 reducer 来处理 action。reducer 是一个函数，它接收当前的 state 和 action，并返回新的 state。

例如，可以创建一个 reducer 函数来处理删除收藏的 action：

const initialState = {
  favorites: []
}

function rootReducer(state = initialState, action) {
  switch (action.type) {
    case 'DELETE_FAVORITE':
      return {
        ...state,
        favorites: state.favorites.filter(favorite => favorite.id !== action.favoriteId)
      }
    default:
      return state
  }
}

接下来，需要创建 store 并使用 reducer 函数：

import { createStore } from 'redux'

const store = createStore(rootReducer)

最后，需要在组件 A 和 B 中使用 React Redux 的 connect 函数来连接组件和 store。connect 函数会返回一个高阶组件，可以通过该高阶组件包装组件来访问 store 的数据和 action。

例如，可以在组件 A 中使用 connect 函数来调用 action：

import React from 'react'
import { connect } from 'react-redux'

const Favorite = (props) => {
  const deleteFavorite = (e) => {
    e.stopPropagation()
    let index = e.target.getAttribute("data-index")
    props.dispatch({ type: 'DELETE_FAVORITE', favoriteId: index })  // 调用 action
  }
  return (
    <span className={styles.delete} data-index={index} onClick={deleteFavorite}>
      <CloseCircleOutline />
    </span>
  )
}

export default connect()(Favorite)  // 使用 connect 函数包装组件

在组件 B 中也可以使用 connect 函数来调用 action：

import React from 'react'
import { connect } from 'react-redux'

function HouseDetail() {
  const [isfavorite, setIsfavorite] = useState(false)

  function handleFavorite() {
    if (isfavorite) {
      props.dispatch({ type: 'DELETE_FAVORITE', favoriteId: id })  // 调用 action
      setIsfavorite(false)
    }
  }
  return (
    <div>
      // ...
      <button onClick={handleFavorite}>Delete favorite</button>
    </div>
  )
}

export default connect()(HouseDetail)  // 使用 connect 函数包装组件

这样，当用户点击 A 组件中的 span 时，会调用 deleteFavorite 函数，并调用 dispatch 函数来发送 action。这个 action 会被 reducer 处理，更新 store 的数据。同时，B 组件中的 handleFavorite 函数也可以调用 dispatch 函数来发送 action，实现删除功能。
希望对您有所启发