React中动态按钮状态管理的最佳实践：使用组件封装实现独立更新

const { useState } = React;

const Chat = () => {
    const [myMessages, setMyMessages] = useState([]);
    const [message, setMessage] = useState("");
    // 尝试在父组件中管理所有按钮的状态
    const [myButtons, setMyButtons] = useState([]); 

    const addNewMessage = () => {
        let buttonIndex = myMessages.length;
        // 添加新的按钮状态
        setMyButtons(prevButtons => [...prevButtons, { value: "Copy message" }]);

        let newMessage =
            (<div>
                <div>{message}</div>
                <button className="copy-to-clipboard-button" onClick={() => { copyToClipboard(buttonIndex, message); }}>
                    {myButtons[buttonIndex] ? myButtons[buttonIndex].value : "Copy message"} 
                </button>
            </div>);

        setMyMessages([...myMessages, newMessage]);
    };

    const copyToClipboard = (i, text) => {
        alert("copied");
        navigator.clipboard.writeText(text);
        let allButtons = myButtons.slice();
        allButtons[i].value = "Copied!";
        // 更新特定按钮的状态
        setMyButtons([...allButtons]); 
    };

    const handleChange = (event) => {
        setMessage(event.target.value);
    };

    return (
        <div>
            <div style={{ maxHeight: "80vh", minHeight: "90vh", maxWidth: "96vw" }}>
                <div>{myMessages.map((msg, index) => <div key={index}>{msg}</div>)} {/* 注意：这里存储的是JSX元素，而非组件 */}
                    <input
                        type="text"
                        id="message"
                        name="message"
                        onChange={handleChange}
                        value={message}
                    />
                    <button onClick={addNewMessage}>Go!</button>
                </div>
            </div>
        </div>
    );
};

ReactDOM.createRoot(document.body).render(<Chat />);

const { useState } = React;

const Message = ({ message }) => {
  // 每个Message组件实例都有自己的buttonValue状态
  const [buttonValue, setButtonValue] = useState("Copy message");

  const copyToClipboard = (text) => {
    alert("copied");
    navigator.clipboard.writeText(text);
    // 更新当前Message组件的buttonValue状态
    setButtonValue("Copied!");
  };

  return (
    <div>
      <div>{message}</div>
      <button
        className="copy-to-clipboard-button"
        onClick={() => {
          copyToClipboard(message);
        }}
      >
        {buttonValue} {/* 按钮文本直接绑定到组件的局部状态 */}
      </button>
    </div>
  );
};

const { useState } = React;

const Chat = () => {
  const [myMessages, setMyMessages] = useState([]);
  const [message, setMessage] = useState("");

  const addNewMessage = () => {
    // 父组件只管理消息内容，不再管理按钮状态
    setMyMessages([...myMessages, message]);
    setMessage(""); // 清空输入框
  };

  const handleChange = (event) => {
    setMessage(event.target.value);
  };

  return (
    <div>
      <div style={{ maxHeight: "80vh", minHeight: "90vh", maxWidth: "96vw" }}>
        {myMessages.map((msg, index) => (
          // 遍历myMessages数组，为每条消息渲染一个Message组件实例
          <Message key={index} message={msg} /> 
        ))}
        <input type="text" id="message" name="message" onChange={handleChange} value={message} />
        <button onClick={addNewMessage}>Go!</button>
      </div>
    </div>
  );
};

ReactDOM.createRoot(document.body).render(<Chat />);