类型“{variableName:string;}”不可分配给类型“string”

试着这样破坏你的道具。这是一个常见的陷阱,因为您将props对象键入为字符串,但props参数是一个对象,并且您希望在代码中从中销毁某个属性:

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

正如你所看到的,也许现在的错误 Type '{ variableName: string; }' is not assignable to type 'string' 表示您正在传递组件 { variableName: string } 类型,但您将其声明为 string

代码位 (variableName: string) 在Javascript中没有任何意义。

您混淆了typescript,这意味着您的“variableName”是一个字符串类型。

要修复它,在javascript中,您只需将组件重写为:

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

不需要在javascript中指示变量的类型。

Ilja KO提到了更简单的版本,可能更适合这种情况,但我想添加一个替代Ilja的正确答案。

为了让TypeScript了解组件的道具类型,您可以将其道具类型明确定义为接口:

interface DynamicAreaProps {
  variableName: string;
}

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

export const myFunction = () => {
  const myOtherVariable = '';

  return (
    <DynamicArea variableName={myOtherVariable} />
  );
};