将参数传递给 function 组件 - typescript ts2322 错误

Question

我在以下简单组件中遇到 typescript 问题。

这按预期工作：

import React from "react";

export default function App() {
  const simpleComp = (shouldSayA: boolean) => {
    return shouldSayA ? <p>a</p> : <p>b</p>;
  };

  return <div>{simpleComp(true)}</div>;
}

但是，当我将 simpleComp function 转换为 JSX function 组件 SimpleComp 时，如下所示：

import React from "react";

export default function App() {
  const SimpleComp = (shouldSayA: boolean) => {
    return shouldSayA ? <p>a</p> : <p>b</p>;
  };
  return <div><SimpleComp shouldSayA={true} /></div>;
}

我收到以下错误：

const SimpleComp: (shouldSayA: boolean) => JSX.Element
Type '{ shouldSayA: boolean; }' is not assignable to type 'IntrinsicAttributes & boolean'.
  Type '{ shouldSayA: boolean; }' is not assignable to type 'true'.ts(2322)

我可以通过执行以下操作来修复 TS 错误：

import React from "react";

export default function App() {
  const SimpleComp = ({shouldSayA}: { shouldSayA: boolean }) => {
    return shouldSayA ? <p>a</p> : <p>b</p>;
  };
  return (
    <div>
      <SimpleComp shouldSayA={true} />
    </div>
  );
}

但我确定我缺少一些更简单的方法。 为什么TS会在第二个例子中抛出错误？

Answer 1

传递给组件的第一个参数是包含所有道具的 object。

如果您传递一个道具，那么它将是一个包含单个键值对的 object。

这就是组件的工作方式。 没有更简单的方法。

---

也就是说，通常最好：

• 一次定义您的组件，而不是在每次渲染时重新定义它们
• 将您的类型定义为变量而不是内联

import React from "react";

const App = () => {
  return (
    <div>
      <SimpleComp shouldSayA={true} />
    </div>
  );
};

type SimpleCompProps = {
  shouldSayA: boolean;
};

const SimpleComp = ({ shouldSayA }: SimpleCompProps) => {
  return shouldSayA ? <p>a</p> : <p>b</p>;
};

export default App;