如何在React中为元素绑定Object类型数据？

推荐方案：用组件状态管理数据 #

React的核心是状态驱动UI，不需要像jQuery那样直接把对象绑定到DOM元素上，而是将数据存在组件的状态中，通过状态来控制数据的存储和读取，这是React的标准实践。

以下是对应你需求的实现代码：

import { useState } from 'react';
import dayjs from 'dayjs';

function DateDemo() {
  // 用useState存储dayjs对象，初始值为null
  const [dateObj, setDateObj] = useState(null);

  // 点击set按钮时，将当前dayjs对象存入状态
  const handleSet = () => {
    setDateObj(dayjs());
  };

  // 点击restore按钮时，从状态中取出对象并弹窗格式化时间
  const handleRestore = () => {
    if (dateObj) {
      alert(dateObj.format('YYYY-MM-DD hh:mm:ss'));
    }
  };

  return (
    <div>
      <button onClick={handleSet}>set</button>
      <button onClick={handleRestore}>restore</button>
    </div>
  );
}

为什么这样做？ #

• React的数据流是单向的，状态是组件的唯一数据源，DOM只是状态的渲染结果，这样能保证数据和UI始终同步。
• 避免直接操作DOM，减少不必要的DOM交互，提升性能和代码可维护性。

特殊场景：直接关联到DOM元素（不推荐） #

如果因为第三方库等特殊需求，必须将数据绑定到DOM元素上，可以通过ref结合DOM的dataset属性实现，但注意dataset只能存储字符串，所以需要对Object类型数据做序列化/反序列化处理：

import { useRef } from 'react';
import dayjs from 'dayjs';

function DateDemo() {
  // 创建ref关联到set按钮
  const setBtnRef = useRef(null);

  const handleSet = () => {
    const currentDate = dayjs();
    // 将dayjs对象转成JSON字符串存入dataset
    setBtnRef.current.dataset.date = JSON.stringify(currentDate.toJSON());
  };

  const handleRestore = () => {
    const dateStr = setBtnRef.current.dataset.date;
    if (dateStr) {
      // 解析字符串还原dayjs对象
      const dateObj = dayjs(JSON.parse(dateStr));
      alert(dateObj.format('YYYY-MM-DD hh:mm:ss'));
    }
  };

  return (
    <div>
      <button ref={setBtnRef} onClick={handleSet}>set</button>
      <button onClick={handleRestore}>restore</button>
    </div>
  );
}

注意事项 #

• 这种方式会打破React的状态管理模式，可能导致数据和UI不同步，仅在必须与DOM直接交互的场景下使用。
• 复杂对象序列化/反序列化可能丢失部分信息，需要确保数据能被正确转换。

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