ReactJS技术问询：如何通过按钮修改Li组件的a、b属性值

首先得明确React的核心思路：数据驱动视图，你要修改Li组件里的内容，得把这些内容的控制权放到父组件（Butt）的状态里，而不是在Li组件里硬写死。原代码里的a、b都是直接写在Li标签上的静态值，根本没法动态修改，这是核心问题。

具体修改步骤： #

• 把列表数据移到父组件的state中
  把原来硬编码的Li内容改成数组存到useState里，每个项带个id方便后续定位修改：

  const [listData, setListData] = useState([
    { id: 1, a: "One", b: "Two" },
    { id: 2, a: "Three", b: "Four" },
    { id: 3, a: "Five", b: "Six" },
    { id: 4, a: "Seven", b: "Eight" }
  ]);
  

• 修改Li组件的渲染逻辑
  Li组件只负责接收数据并展示，不需要自己存状态：

  function Li({ item }) {
    return (
      <>
        <p>This is a paragraph.. </p>
        <ul>
          <li>{item.a}</li>
          <li>{item.b}</li>
        </ul>
      </>
    );
  }
  

• 父组件循环渲染Li组件
  用map遍历state里的listData，把每个item传给Li：

  <div> {/* 原代码的<ui>是错误标签，换成div或者其他容器 */}
    {listData.map(item => (
      <Li key={item.id} item={item} />
    ))}
  </div>
  

• 编写按钮的点击事件来修改数据
  比如你想给第一个项的a追加" is a number"，就通过setListData更新state：

  <button onClick={() => {
    setListData(prevData => {
      return prevData.map(item => {
        // 找到id为1的项，修改它的a值
        if (item.id === 1) {
          return { ...item, a: `${item.a} is a number` };
        }
        return item;
      });
    });
  }}> Click me </button>
  

完整修改后的代码： #

import { useState } from 'react';
import { createRoot } from 'react-dom/client';

function Butt() {
  // 把列表数据存到state中
  const [listData, setListData] = useState([
    { id: 1, a: "One", b: "Two" },
    { id: 2, a: "Three", b: "Four" },
    { id: 3, a: "Five", b: "Six" },
    { id: 4, a: "Seven", b: "Eight" }
  ]);

  // 修改指定项的函数
  const updateListItem = () => {
    setListData(prev => {
      return prev.map(item => {
        // 这里可以根据需求修改任意项，比如修改第一个项
        if (item.id === 1) {
          return { ...item, a: `${item.a} is a number` };
        }
        // 其他项保持不变
        return item;
      });
    });
  };

  return (
    <>
      <div>
        {listData.map(item => (
          <Li key={item.id} item={item} />
        ))}
      </div>
      <button onClick={updateListItem}> Click me </button>
    </>
  );
}

function Li({ item }) {
  return (
    <>
      <p>This is a paragraph.. </p>
      <ul>
        <li>{item.a}</li>
        <li>{item.b}</li>
      </ul>
    </>
  );
}

createRoot(document.getElementById('root')).render(
  <>
    <Butt />
  </>
);

额外注意点： #

• 原代码里的<ui>是无效HTML标签，换成了<div>容器；
• React里修改state必须用setter函数（这里的setListData），不能直接修改state的值；
• 循环渲染组件时必须加key属性，用每个项的唯一id，不要用索引；
• 如果想实现点击某个Li组件自己修改内容，只需要给Li组件传一个回调函数，在Li里触发回调通知父组件修改state就行。

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