有一個array我根據array內容渲染出一連串的li
並且將最後一個li的顏色設成紅色
當點擊某個li時需要將其他li的元素改成黑色，點到的這個li改成紅色

但是當array內容又更動時原本被點過變成紅色的li要變回黑色
所以當點擊和渲染列表時永遠只會有一個li可以處在紅色的狀態

想問的是

假設點擊時我要把其他li變成黑色，自身變成紅色
我能不能再onClick()當中取所有的li直接改成黑色
然後e.target改成紅色
直接用js操作Dom這樣的作法是正確的嗎??

另外如果有array有新的內容加入時雖然會自動產出列表
舊的li的上舊有的style並不會被重製
那要如何讓每一次渲染時都保持初始的狀態呢?

其實我想的是如果用react是不是應該盡量遵從大家平常在用這個框架時常用的做法?
比方說某個功能在react中可能適合這樣子寫，但可能我並不知道可以這樣做

function Item(props) {
  const itemStyle = {};
  itemStyle.color = props.active === true ? "red" : "black";
  return (
    <li
      style={itemStyle}
      key={props.value}
      onClick={(e) => {
        e.target.style.color = "red";
      }}
    >
      {props.content}
    </li>
  );
}
function renderItems(list) {
  let Items = [];
  for (let i = 0; i < list.length; i++) {
    if (i === list.length - 1) {
      Items.push(<Item key={i} value={i} content={list[i]} active={true} />);
    } else {
      Items.push(<Item key={i} value={i} content={list[i]} />);
    }
  }
  return Items;
}