TypeScript 中 React 组件 Props 类型定义错误的解决方案-js教程-PHP中文网

TypeScript 中 React 组件 Props 类型定义错误的解决方案

该错误源于将 React 函数组件的参数误定义为 string 类型，而实际传入的是对象形式的 props（如 { variableName: string }），导致类型不匹配。正确做法是为 props 参数明确定义对象结构并解构使用。

该错误源于将 react 函数组件的参数误定义为 `string` 类型，而实际传入的是对象形式的 props（如 `{ variablename: string }`），导致类型不匹配。正确做法是为 props 参数明确定义对象结构并解构使用。

在 TypeScript + React 开发中，Type '{ variableName: string; }' is not assignable to type 'string' 是一个典型且高频的类型错误。其根本原因在于：组件函数签名与实际接收的 props 结构不一致。

回顾原始代码：

const DynamicArea = (variableName: string) => (
  <div>Eventually this will be filled with some cool data</div>
);

此处，DynamicArea 被声明为接收一个名为 variableName 的 string 类型参数——但 React 组件的 props 永远是一个对象（即使只传一个 prop，它也会被包装为 { variableName: '...' }）。因此，当 JSX 中写时，React 实际传入的是一个对象 { variableName: string }，而非裸字符串，自然与 string 类型冲突。

✅ 正确写法是：将参数声明为具有明确 shape 的 props 对象，并通过解构语法提取所需字段：

react-pro

你是一位 React 专家，擅长高级 Hook、性能优化、状态管理和现代 React 模式。适用场景：高级 Hook 模式...

下载

const DynamicArea = ({ variableName }: { variableName: string }) => (
  <div>Eventually this will be filled with some cool data</div>
);

你也可以使用接口或类型别名提升可读性与复用性：

interface DynamicAreaProps {
  variableName: string;
}

const DynamicArea = ({ variableName }: DynamicAreaProps) => (
  <div>Eventually this will be filled with some cool data</div>
);

? 小贴士：