如何将使用getElementById的ReactJS显隐函数转为React Native实现？

React Native 没有 DOM 相关 API，采用状态驱动渲染的思路替代原生 DOM 操作即可实现同等效果，具体实现逻辑如下：

核心思路 #

• 放弃手动操作DOM样式的思路，通过状态变量存储需要显隐的组件ID集合，状态变化时自动触发组件重新渲染完成显隐控制
• 有两种常见显隐控制方式可根据场景选择：
  • 条件渲染：不可见时组件直接卸载，适合内容复杂、不需要保留组件状态的场景
  • style.display 控制：不可见时组件仅隐藏不卸载，状态会保留，和你原有Web端display:block/none的逻辑完全一致

完整实现代码 #

以下是函数组件+Hooks的完整示例，完全对齐你原有两个函数的能力：

import { useState } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';

// 示例列表数据，可替换为你的实际业务数据
const listData = [
  { id: '1', content: '列表项1的展示内容' },
  { id: '2', content: '列表项2的展示内容' },
  { id: '3', content: '列表项3的展示内容' },
]

export default function VisibleListDemo() {
  // 用Set存储当前处于显示状态的组件ID，查询/修改效率更高
  const [visibleIds, setVisibleIds] = useState(new Set());

  // 等效原mostrar函数：强制显示指定ID的组件
  const mostrar = (id) => {
    setVisibleIds(prev => {
      const newVisibleSet = new Set(prev);
      newVisibleSet.add(id);
      return newVisibleSet;
    });
  };

  // 等效原fechar函数：切换指定ID组件的显隐状态
  const fechar = (id) => {
    setVisibleIds(prev => {
      const newVisibleSet = new Set(prev);
      newVisibleSet.has(id) ? newVisibleSet.delete(id) : newVisibleSet.add(id);
      return newVisibleSet;
    });
  };

  return (
    <View>
      {listData.map(item => {
        const isItemVisible = visibleIds.has(item.id);
        return (
          <View key={item.id} style={{ marginVertical: 10 }}>
            {/* 点击按钮触发显隐切换，也可以绑定到其他事件触发mostrar/fechar */}
            <TouchableOpacity onPress={() => fechar(item.id)}>
              <Text>切换项{item.id}显隐状态</Text>
            </TouchableOpacity>

            {/* 方式1：display控制显隐，和原有Web逻辑完全对齐 */}
            <View style={{ display: isItemVisible ? 'flex' : 'none', marginTop: 5 }}>
              <Text>{item.content}</Text>
            </View>

            {/* 方式2：条件渲染，不需要保留状态时可选，性能更高
            {isItemVisible && (
              <View style={{ marginTop: 5 }}>
                <Text>{item.content}</Text>
              </View>
            )}
            */}
          </View>
        );
      })}
    </View>
  );
}

类组件适配说明 #

如果你的项目用的是类组件，只需要把visibleIds状态放到this.state中，修改状态用this.setState即可，两个控制函数的核心逻辑不需要调整。

内容的提问来源于stack exchange，提问作者Joe Hill