Question

我有一个 sidebarCart 组件，基本上是一个购物车组件，它包装在 forwardRef 钩子中，并包含 useImperativeHandle ，以将函数传递给父级是App。一切运行良好，直到我引入了 useContext 钩子，现在 sidebarCart 中的refs变为null，这是什么奇怪的行为？

我所谈论的裁判是 cartContainer 和 pageShdowCover 我发现停止我的nodejs服务器时，这个问题消失了。

这是 sidebarCart 组件。

import React ,{createRef,forwardRef,useImperativeHandle,useContext,useEffect}from 'react'
import CartItem from './CartItem'
import {MyContext} from '../../Context/ProductsProvider'


const SideBarCart=forwardRef((props,ref)=>{
    const {setCart,cart} =useContext(MyContext)
    const cartContainer  = createRef()
    const pageShdowCover = createRef()

    const slideOut=e=>{
        cartContainer.current.style.right='-400px'
        pageShdowCover.current.style.opacity='0'
        setTimeout(()=>pageShdowCover.current.style.display='none', 600);
    }
    useImperativeHandle(ref, () => ({
        slideIn(){
           pageShdowCover.current.style.display='block'
           cartContainer.current.style.right='0'
           pageShdowCover.current.style.opacity='1'
        }
    }),[pageShdowCover,cartContainer]);
 
    return (
        <div>
            <div className="pageShdowCover"  ref={pageShdowCover}  ></div>
            <div className="SideContainer cart" ref={cartContainer}>
                <div className="cart__top">
                    <h1>Cart</h1>
                   <i className="far fa-times-circle Close" onClick={slideOut}></i>  
                   <a onClick={slideOut}>x</a>
                </div>
                <div className="cart__body">  
                </div>
        </div>
        </div>
    )
})

export default SideBarCart

Answer 1

我认为 useContext 钩子会导致子级在父级重新渲染的情况下重新渲染。 Refs 在更改时不会触发重新渲染，因此从父级传递给子级的 refs 可能是陈旧的？（我认为这就是答案 - 我可能不正确）。

总而言之（对我有用）：为了解决我遇到的问题，只需将 ref 存储在 state 中以在 ref 更改时触发重新渲染。

===

说明

我的用例是我有一个有 4 个孩子的父组件。其中一个孩子是标题，我希望兄弟姐妹能够在使用 ReactDOM.createPortal

呈现它们时“注入”控件

- Parent
 - Header
 - A
 - B
 - C

我发现如果我只使用了一个 ref，当 ref 被分配给 DOM 时，父级不会被重新渲染，因此组件 A、B、C 不是重新渲染，因此他们不知道新分配的 ref.current 值。

I.E.以下操作无效

const Parent = () => {
  const ref = useRef()

  return (
   <div>
    <Header ref={el => { ref.current = el } />
    <C ref={ref} />
    <B ref={ref} />
    <C ref={ref} />
   </div>
  )
}

// A, B, C have the same signature
const A = forwardRef((props, ref) => {
  return (
    <div>
      {createPortal(<SomeComponent />, ref.current)}
      <OtherComponent />
    </div>
  )
})

我在 StackOverflow 上的 THIS 答案中找到了解决方案。我来回答这个问题是因为 A、B 和 C 正在使用 useContext(...)。以前对我来说，当状态是在 Parent 中创建而不是使用上下文时，上面的代码有效 - 可能是因为父级正在重新渲染并留下陈旧的引用或其他东西（我认为它是“意外”工作的） .即问题与上下文无关，而是与如何触发重新渲染有关。

此代码可以工作

const Parent = () => {
  const [ref, setRef] = useState()

  return (
   <div>
    <Header ref={el => { setRef(el) } />
    <C ref={ref} />
    <B ref={ref} />
    <C ref={ref} />
   </div>
  )
}

// A, B, C have the same signature
const A = forwardRef((props, ref) => {
  return (
    <div>
      {createPortal(<SomeComponent />, ref)}
      <OtherComponent />
    </div>
  )
})

每当我将useContext钩子添加到包裹在frowardRef钩子中的组件时，refs都将变为null

1 个答案: