如何在React.js中创建动态Div并设置动态ID及代码改写

1. React中创建动态Div并设置动态ID #

在React里不需要手动操作DOM创建元素，直接通过JSX结合表达式插值就能实现：

• 用大括号{}把动态逻辑嵌入JSX，比如生成ID时可以用模板字符串${r}-${c}
• 通常通过数组的map方法批量生成动态元素，React会自动处理DOM渲染

示例写法：

<div id={`${rowIndex}-${colIndex}`} className="tile">
  {/* 元素内容 */}
</div>

2. 原生JS代码改写为React代码 #

原生代码逻辑是：遍历行列生成tile元素，给每个tile设置行列拼接的ID，根据board中的数值更新tile样式/内容，最后挂载到#board容器。以下是React函数组件的实现：

import { useState } from 'react';

function Board() {
  // 示例数据，实际可通过props传入或从状态获取
  const [board, setBoard] = useState([[2, 4], [8, 16]]);
  const rows = board.length;
  const columns = board[0]?.length || 0;

  // 模拟原生updateTile逻辑，根据数值返回元素的props
  const getTileProps = (num) => {
    return {
      className: `tile ${num ? `tile-${num}` : 'tile-empty'}`,
      children: num || ''
    };
  };

  return (
    <div id="board">
      {/* 嵌套map遍历行列生成动态tile */}
      {Array.from({ length: rows }).map((_, r) => (
        <React.Fragment key={`row-${r}`}>
          {Array.from({ length: columns }).map((_, c) => {
            const tileProps = getTileProps(board[r][c]);
            return (
              <div
                key={`${r}-${c}`} // React列表元素必须添加唯一key
                id={`${r}-${c}`} // 动态生成ID
                {...tileProps}
              />
            );
          })}
        </React.Fragment>
      ))}
    </div>
  );
}

export default Board;

核心改动说明： #

• 移除手动DOM操作（createElement、append），改用React的JSX声明式渲染
• 用map循环替代原生for循环，批量生成动态元素
• 给每个列表元素添加唯一key，满足React的列表渲染优化要求
• 将原生的updateTile改为返回组件props的函数，贴合React数据驱动的逻辑
• 用useState管理board数据，数据变化时React会自动重新渲染组件

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