如何从 function 返回之前定义的 useRef 变量？

Question

我正在渲染一个列表。 在特定按钮上，我想要一个参考。 有没有办法存档？ 或者有什么解决办法？

const plusParent = useRef(null);
const plusChild = useRef(null);
const minusParent = useRef(null);
const minusChild = useRef(null);

const detectRef = (button, comp) => {
    switch (button) {
      case '+':
        return comp === 'parent' ? plusParent : plusChild;
      case '-':
        return comp === 'parent' ? minusParent : minusChild;
    }
  };

{row.map((button) => {
          return (
            <View>
              <TouchableOpacity
                 ref={() => detectRef(button, 'parent')}
                >
                <Text>{button}</Text>
              </TouchableOpacity>
            </View>
          );
        })}

如果我尝试访问我的一个 useRef 变量，我将得到 null。

Answer 1

目前，您的ref最终成为匿名箭头 function 。 只需删除额外的 function 包装器并直接调用 function 以返回结果。

{row.map((button) => {
          return (
            <View>
              <TouchableOpacity
                 ref={detectRef(button, 'parent')}
                >
                <Text>{button}</Text>
              </TouchableOpacity>
            </View>
          );
        })}