Ken428965 2022-12-16 22:47 采纳率: 53.4%
浏览 30
已结题

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

在使用的react版本如下:

img


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即可实现删除功能?请在现有代码基础上展示代码举例说明,谢谢。

  • 写回答

1条回答 默认 最新

  • ChatGPTᴼᴾᴱᴺᴬᴵ 2022-12-17 20:36
    关注

    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,实现删除功能。
    希望对您有所启发

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 12月18日
  • 已采纳回答 12月18日
  • 创建了问题 12月16日

悬赏问题

  • ¥15 关于#sql#的问题:#情况描述 在用vs对项目进行调试时,出现找不到网络路径,然后查看SQL配置工具,发现SQL服务显示远程调用过程失败(相关搜索:防火墙)
  • ¥15 主要进行描述泥浆在管路不同区段泥浆的密度不相同,泥浆的密度有高有低,此时管路的摩阻分布需要怎么计算,(标签-matlab)
  • ¥40 通过编制程序计算圆管内层流充分发展对流换热,参数如图5-4,以及公式5-16所示,要求用表5-6对程序计算准确性进行验证
  • ¥20 该学习哪个编程语言? AI会取代程序员吗?
  • ¥15 ensp如何拼通IP地址
  • ¥15 saber软件导入Ibis模型报错
  • ¥15 商城生产日期批次库存问题
  • ¥15 esp8266控制共阳极wrgb灯板无法关闭所有led灯
  • ¥100 python读取速度问题
  • ¥15 stm32f407使用DMA问题