如何在 React 中使用多个动态引用名称？

问题描述

我正在编写一个组件，需要在继续之前验证是否满足某些条件。这些标准在 json 文件中是红色的。文件看起来像这样（对象更深，但为了简单起见，我将只展示相关部分）：

"criteria": [
    {
        "id": "criteria_postpone","ref": "criteriaPostponeRef","text": "Was your conviction postponed?"
    },{
        "id": "criteria_another","ref": "criteriaAnotherRef","text": "Some other dumb question that no one cares about"
    }
]

现在在我的组件中，我使用 useEffect 钩子来读取 json 数据（它存储在 jsonData 常量中），当它完成加载时，我正在尝试创建 refs 并将它们分配给相应的元素。到目前为止，我尝试过这种方法（所有方法都失败了）：

创建单独的 refs（此方法失败，因为显然不能在循环内使用 refs - 我很明白为什么）

const refs = {};
for (let c of jsonData.criteria)
    refs[c.ref] = useRef();

创建单个引用对象并在其中存储多个值。这种方法似乎是正确的方法，但我无法使其发挥作用。我知道 ref 只是一个存储在 React 内部的对象，它有一个 current 属性，该属性被初始化为您作为参数传递给 useRef 钩子的任何值。但是，我不确定最后的结构：

const ref = useRef('blabla');

应该像

const ref = {
    current: 'blabla'
}

对吧？但是后来我认为 current 属性可以保存整个对象（这是有道理的）作为“如何使用动态命名的引用？”这个问题的答案。现在这有什么意义？我可以在 ref 的 current 属性中保存一个对象，但是该对象中的每个键如何拥有自己的 current 属性，并在更改时更新？

有什么办法可以实现我的目标吗？我需要知道如何初始化引用，以及如何在元素的 ref“属性”上设置引用时处理引用。

谢谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）