React 中实现随机词替换功能：TypeScript 类型安全实践-html教程-PHP中文网

React 中实现随机词替换功能：TypeScript 类型安全实践

本文详解如何在 React + TypeScript 项目中安全访问 DOM 元素的 dataset 属性，解决“Property 'dataset' does not exist on type 'EventTarget'”类型错误，并完整实现基于主题（忍者/宝可梦/太空）的文本单词随机替换功能。

本文详解如何在 react + typescript 项目中安全访问 dom 元素的 `dataset` 属性，解决“property 'dataset' does not exist on type 'eventtarget'”类型错误，并完整实现基于主题（忍者/宝可梦/太空）的文本单词随机替换功能。

在 React 中直接操作 DOM（如 document.querySelectorAll、addEventListener）虽可行，但在 TypeScript 环境下需格外注意类型安全。你遇到的错误 Property 'dataset' does not exist on type 'EventTarget' 正是典型问题：TypeScript 将事件对象的 e.target 默认推断为泛型 EventTarget 类型，而 dataset 是 HTMLElement（尤其是 HTMLButtonElement 等具体元素）才具备的属性。

✅ 正确做法是进行类型断言（type assertion），明确告知 TypeScript 当前目标元素的具体类型：

b.addEventListener('click', (e) => {
  e.preventDefault();
  if (textarea?.value) {
    // ✅ 安全访问 dataset：显式断言为 HTMLButtonElement
    const flavour = (e.target as HTMLButtonElement).dataset.flavour;
    if (flavour && flavours[flavour]) {
      const result = flavourize(textarea.value, flavours[flavour]);
      updateOutput(result);
    }
  }
});

⚠️ 注意事项：

避免在函数组件顶层执行 DOM 查询：document.querySelector 等操作应在 useEffect 中进行，否则可能因组件未挂载或多次渲染导致引用失效或内存泄漏；
务必添加空值检查：textarea 和 output 可能为 null，建议使用可选链 ?. 或 useRef 替代原生查询；
推荐 React 方式重构：更符合 React 思想的做法是用状态管理输入与输出，通过 onClick 事件处理器传参，而非依赖 dataset 和全局 DOM 查询。

以下是优化后的推荐实现（含 useRef 与 useState）：

Galileo TypeScript sdk

完整的Galileo AI平台 TypeScript/JS SDK 参考，用于评估、观察和保护 GenAI 应用。适用于构建 Node.js 或 TypeScript 项目。

下载

import { FC, useRef, useState, useEffect } from 'react';

export const App: FC = ({ name }) => {
  const textareaRef = useRef<htmltextareaelement>(null);
  const outputRef = useRef<htmldivelement>(null);
  const [outputText, setOutputText] = useState<string>('');

  const flavours = {
    ninja: ['dojo', 'shogun', 'shinobi', 'samurai', 'shuriken'],
    pokemon: ['pika', 'pokeball', 'pokedex', 'evolve', 'ash', 'gym'],
    space: ['universe', 'galaxy', 'telescope', 'comet', 'stars'],
  } as const;

  const flavourize = (inputText: string, flavour: string[]) => {
    return inputText
      .split(' ')
      .map((word, i) => (i % 3 === 0 ? flavour[Math.floor(Math.random() * flavour.length)] : word))
      .join(' ');
  };

  const handleFlavourClick = (flavourKey: keyof typeof flavours) => {
    if (textareaRef.current?.value) {
      const result = flavourize(textareaRef.current.value, flavours[flavourKey]);
      setOutputText(result);
      // 同时可同步更新 ref（如需 DOM 直接操作）
      if (outputRef.current) outputRef.current.textContent = result;
    }
  };

  return (
    <div>
      <h1>Hello {name}!</h1>
      <p>Start editing to see some magic happen :)</p>

      <form onsubmit="{(e)"> e.preventDefault()}>
        <textarea ref="{textareaRef}" placeholder="Enter text..."></textarea><div classname="buttons">
          <p>Choose your theme:</p>
          <button type="button" onclick="{()"> handleFlavourClick('ninja')}>Ninja</button>
          <button type="button" onclick="{()"> handleFlavourClick('pokemon')}>Pokemon</button>
          <button type="button" onclick="{()"> handleFlavourClick('space')}>Space</button>
        </div>
      </form>

      <div classname="output" ref="{outputRef}">
        <strong>Output:</strong> {outputText || '(empty)'}
      </div>
    </div>
  );
};</string></htmldivelement></htmltextareaelement>

? 总结：