首页 > 解决方案 > 如何从函数返回之前定义的 useRef 变量?

问题描述

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

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 变量之一,我会得到空值。

标签: javascriptreact-native

解决方案


目前你ref最终成为一个匿名箭头函数。只需删除该附加函数包装器并直接调用该函数以返回结果。

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


推荐阅读