如何从标准HTML元素传递props给React组件（TypeScript环境）

架构老林

2026-10-1

最优实现方案

你可以直接利用原生DOM自带的dataset属性批量提取所有data-*自定义属性，不需要逐个调用getAttribute，配合TS类型定义可以做到既简洁又类型安全。

先修正两个新手常见问题：

React组件名必须大写开头，小写开头会被识别为原生HTML标签，无法正常渲染自定义组件
组件内的变量插值需要用{}包裹，否则会直接渲染为字符串

完整TS实现代码

组件定义

// 定义组件Props类型，和data-*属性一一对应（data-something对应驼峰字段something）
interface SomeComponentProps {
  something: string;
  // 新增自定义属性只要在这里加对应字段即可
}

// 组件名大写开头
function SomeComponent(props: SomeComponentProps) {
  // 变量用{}包裹
  return <h1>{props.something}</h1>
}

挂载渲染代码

// React 18 写法
import { createRoot } from 'react-dom/client';

// 断言元素非空（如果确认页面一定存在该元素）
const rootEl = document.getElementById('someElement')!;
const root = createRoot(rootEl);

// 直接展开dataset，所有data-*属性会自动转为驼峰作为props传入组件
root.render(<SomeComponent {...rootEl.dataset} />);

如果你使用的是React17及更早版本，用旧的渲染API即可：

import ReactDOM from 'react-dom';

const rootEl = document.getElementById('someElement')!;
ReactDOM.render(<SomeComponent {...rootEl.dataset} />, rootEl);

特殊场景处理：非字符串类型属性转换

dataset提取的所有属性默认都是字符串类型，如果你需要数字、布尔值等类型，可以手动转换后再传入：

// 比如有data-count="10"、data-disabled="true"两个属性
const props = {
  ...rootEl.dataset,
  count: Number(rootEl.dataset.count),
  disabled: rootEl.dataset.disabled === 'true'
}

root.render(<SomeComponent {...props} />);