React Native中如何定位特定DOM元素？附React实现代码

React Native 不存在浏览器的DOM环境，document.querySelector、直接修改className这类Web端的DOM操作方式在RN里完全行不通，得用RN专属的方案实现你的需求：

1. 单个组件的定位与操作 #

如果是针对单个组件，用useRef（函数组件）或createRef（类组件）获取组件实例，之后可以调用组件的原生方法，或者更推荐用状态来控制样式：

import { useRef, View, StyleSheet } from 'react-native';

function SingleCell() {
  const cellRef = useRef(null);

  const handleUpdateCell = () => {
    // 这里可以获取到组件实例，部分原生组件支持特定方法调用
    console.log('组件实例:', cellRef.current);
    // 更推荐用状态控制样式，而非直接操作实例
  };

  return (
    <View 
      ref={cellRef}
      style={styles.cell}
    />
  );
}

const styles = StyleSheet.create({
  cell: {
    width: 50,
    height: 50,
    backgroundColor: '#fff',
    borderWidth: 1,
  },
});

2. 列表/网格中指定位置组件的样式修改（对应你的场景） #

你原来的代码是通过行列标记修改单元格样式，在RN里最合理的方式是用状态驱动UI：维护一个记录每个单元格状态的数组，渲染时根据状态自动应用样式，而不是去“定位”组件修改。

示例代码：

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

function Grid({ totalRows, totalCols }) {
  // 初始化网格状态，默认所有单元格都不是wall
  const [gridStatus, setGridStatus] = useState(
    Array(totalRows).fill().map(() => Array(totalCols).fill(false))
  );

  // 把指定行列的单元格设为wall
  const markCellAsWall = (row, col) => {
    setGridStatus(prev => {
      const newStatus = [...prev];
      newStatus[row][col] = true;
      return newStatus;
    });
  };

  return (
    <View style={styles.gridContainer}>
      {gridStatus.map((rowData, row) => (
        <View key={row} style={styles.row}>
          {rowData.map((isWall, col) => (
            <View
              key={`${row}-${col}`}
              style={[
                styles.eachCell,
                isWall && styles.wall // 根据状态添加wall样式
              ]}
            />
          ))}
        </View>
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  gridContainer: {
    flexDirection: 'column',
  },
  row: {
    flexDirection: 'row',
  },
  eachCell: {
    width: 50,
    height: 50,
    borderWidth: 1,
    borderColor: '#ccc',
  },
  wall: {
    backgroundColor: '#000',
  },
});

这种状态驱动的方式符合React/React Native的设计理念，避免了直接操作组件带来的不可预测问题，也更容易维护。

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