代码之家 › 专栏 › 技术社区 › codeanjero

在重新渲染后创建精确数量的ref

reactjs

codeanjero · 技术社区 · 4 年前

我遇到了一个障碍。

我试图渲染一个组件,创建我想要的子组件的数量。
但这些子组件需要参考。
渲染的组件数量可能会有所不同,所需的引用数量也会有所不同。
此外,组件可能已经渲染,可能需要增加其子组件的数量,从而进一步增加所需的引用数量。

问题

问题是,我无法以我想要的确切数量创建这些引用,因为。

它发生在渲染之后。
它发生的顺序不允许在重播之前创建我的ref。

到目前为止我都试过了

为了做到这一点,我有了我的索引组件,按下c键调用一个函数(UseImperializeHandle)。该函数通过存储渲染子组件(如REF)所需的所有信息来尝试更改一种状态。

通过这种方法,我得到了一个错误,即钩子只能在组件函数(本例中是useRef)内部调用。

const newSoldiersAmount = (soldierInfos.numberOfSoldiers || 0) + nbAllies
  const newObjectRefs = [...new Array(newSoldiersAmount)].map((el) => useRef())
  const newRefs = [...new Array(newSoldiersAmount)].map((el) => useRef())
  let newSoldierInfo = {
    numberOfSoldiers: newSoldiersAmount,
    listOfAlive: [...new Array(newSoldiersAmount)].map((el) => true),
    objectRefs: newObjectRefs,
    refs: newRefs
  }
  setSoldierInfos({ ...newSoldierInfo })

我试过useEffect,结果也是一样。

我还尝试了另一种方法,我只需设置要渲染的子组件的数量,并直接从这个数字创建ref,但我得到的错误是,React检测到ForwardRef调用的钩子顺序发生了变化。

const mycomponent = forwardRef((props,ref)=>{
  let objectRefs = [...new Array(soldierInfos.numberOfSoldiers || 0)].map((el) => useRef())
  let refs = [...new Array(soldierInfos.numberOfSoldiers || 0)].map((el) => useRef())
/*the rest of the code*/

密码

我已经把我的代码放在这个代码沙盒中: the codesandbox where my code is

0 回复 | 直到 4 年前

codeanjero 4 年前

最后我找到了一个办法让它发挥作用

我只是使用了createRef(在react 16.3中引入)而不是useRef,这给了我以下代码:

const newSoldiersAmount = (soldierInfos.numberOfSoldiers||0)+nbAllies;
let newSoldierInfo = {
                        numberOfSoldiers : newSoldiersAmount,
                        listOfAlive : [...new Array(newSoldiersAmount)].map(el=>true),
                        objectRefs : [...new Array(newSoldiersAmount)].map(el=>createRef()),
                        refs :[...new Array(newSoldiersAmount)].map(el=>createRef())
                    }
setSoldierInfos({...newSoldierInfo});

我还读到,可能有一种方法可以做到这一点,即创建一个ref并将子ref放入其中:

source of the approach described in the above line