React.js中'Read more'按钮失效问题排查与修复

问题背景 #

我需要创建一个包含标题、正文和“Read more”按钮的文章组件，通过API获取数据批量生成文章，但按钮点击后没有任何反应。

最初的实现思路是：将页面上的按钮和文章容器转为数组，点击按钮时修改对应索引文章容器的className（CSS已定义Post和PostClicked两种状态的样式）。

原组件代码 #

export default function Post (title, body) {
    return (
      <div className="Post" data-postArr>
        <h3>{title}</h3>
        <p>{body}</p>
        <button className="readMore">Read more</button>
      </div>
    )
};

原交互逻辑代码 #

const allButtons = document.getElementsByClassName('readMore');
const buttonArr = [...allButtons];
const allPosts = document.querySelectorAll('data-postArr');
const postsArr = [...allPosts];

for (let i = 0; i < buttonArr.length; i++) {
  buttonArr[i].addEventListener('click', () => {
    if (postsArr[i].className === 'Post') {
      postsArr[i].className = 'PostClicked'
    } else {
      postsArr[i].className = 'Post'
    }
  })
}

原代码问题分析 #

1. DOM选择器错误：document.querySelectorAll('data-postArr')写法错误，属性选择器需要用方括号包裹，正确写法是document.querySelectorAll('[data-postArr]')，这直接导致postsArr为空数组，找不到对应的文章容器元素。
2. 事件绑定时机问题：如果文章是API数据加载完成后动态渲染的，这段逻辑代码可能在DOM元素还未生成时就执行了，导致无法获取到按钮和文章元素。
3. 不符合React最佳实践：采用原生DOM全局操作的方式，违背了React组件化、状态驱动视图的设计思路，容易引发各种DOM操作相关的bug。

修复后的代码 #

export default function Post (title, body) {

  const handleClick = (e) => {
    const postContainer = e.target.parentNode;
    if (postContainer.className === "Post") {
      postContainer.className = "PostClicked";
    } else {
      postContainer.className = "Post";
    }
  }

  return (
      <div className="Post">
        <h3>{title}</h3>
        <p>{body}</p>
        <button className="readMore" onClick={handleClick}>Read more</button>
      </div>
    )
};

修复说明 #

• 将点击事件直接绑定在组件内部的按钮上，通过事件对象e获取当前按钮的父元素（文章容器），精准控制对应容器的样式切换。
• 移除了不必要的data-postArr属性，无需再通过全局选择器查找元素。
• 采用React内联事件绑定的方式，符合框架使用规范，避免了全局DOM操作带来的时机错误和选择器问题。

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