React中无法获取render返回的无序列表元素问题求助

嘿，作为React新手踩这个DOM操作的坑太正常啦！咱们先搞清楚为啥你用getElementById会返回null——React组件的render函数返回的内容是先在虚拟DOM里处理的，还没挂载到真实DOM上的时候，你去调用原生DOM方法肯定拿不到元素呀。而且React的核心思路是用状态驱动UI，根本不需要你手动去抓DOM修改样式，这才是React的正确打开方式～

下面直接给你两种实现方案，先从你用的类组件开始：

类组件实现版本 #

import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.css';

class ColorToggleList extends Component {
  constructor(props) {
    super(props);
    // 用组件状态管理选中项和颜色配置
    this.state = {
      selectedIndex: -1, // -1表示没有选中任何项
      defaultColor: 'black',
      specialColor: 'red'
    };
    // 绑定this，确保点击事件里的this指向组件实例
    this.handleItemClick = this.handleItemClick.bind(this);
  }

  handleItemClick(index) {
    // 点击时切换选中状态：如果是当前选中项就取消，否则选中当前项
    this.setState(prevState => ({
      selectedIndex: prevState.selectedIndex === index ? -1 : index
    }));
  }

  render() {
    // 这里可以换成你自己的列表数据
    const listItems = ['列表项1', '列表项2', '列表项3', '列表项4'];
    
    return (
      <ul>
        {listItems.map((item, index) => (
          <li
            key={index} // 列表项必须加key，帮助React高效更新UI
            // 根据选中状态动态设置颜色
            style={{
              color: this.state.selectedIndex === index ? this.state.specialColor : this.state.defaultColor,
              cursor: 'pointer' // 给个鼠标指针提示，告诉用户这是可点击的
            }}
            // 点击时触发处理函数，传入当前项的索引
            onClick={() => this.handleItemClick(index)}
          >
            {item}
          </li>
        ))}
      </ul>
    );
  }
}

render(<ColorToggleList />, document.getElementById('root'));

函数组件+Hook实现版本（更推荐的现代写法） #

如果你之后开始学React Hooks，用函数组件写会更简洁：

import React, { useState } from 'react';
import { render } from 'react-dom';
import './style.css';

const ColorToggleList = () => {
  // 用useState钩子管理选中状态
  const [selectedIndex, setSelectedIndex] = useState(-1);
  const defaultColor = 'black';
  const specialColor = 'red';

  // 点击处理函数
  const handleItemClick = (index) => {
    setSelectedIndex(prev => prev === index ? -1 : index);
  };

  const listItems = ['列表项1', '列表项2', '列表项3', '列表项4'];

  return (
    <ul>
      {listItems.map((item, index) => (
        <li
          key={index}
          style={{
            color: selectedIndex === index ? specialColor : defaultColor,
            cursor: 'pointer'
          }}
          onClick={() => handleItemClick(index)}
        >
          {item}
        </li>
      ))}
    </ul>
  );
};

render(<ColorToggleList />, document.getElementById('root'));

关键知识点说明 #

• 为什么不用原生DOM操作？：React通过虚拟DOM来管理UI更新，手动操作DOM会破坏React的状态一致性，而且很容易出现DOM还没挂载就去获取的情况（也就是你遇到的null问题）。
• 状态驱动UI：当你更新selectedIndex状态时，React会自动重新渲染组件，根据新的状态计算每个列表项的颜色，完全不需要你手动修改DOM样式。
• key属性的重要性：列表项的key是React识别每个项的唯一标识，必须设置，否则会导致列表更新时出现奇怪的bug。

这样写出来的代码既符合React的设计理念，又能完美实现你要的点击切换颜色的功能～

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