在功能组件中检查类型脚本
我从React应用程序（next.js）上的TypeScript开始，不知道如何键入React组件。
我有一个组件像。。。
type Props = {
children: JSX.Element;
};
export default function SiteLayout({ children }: Props): React.FC {
return (
<div>
{children}
</div>
)
但这给了我以下错误：
VAR子元素：JSX. Element
类型'Element'不能分配给类型'FC
我还试图让它简单地使用JSX。元素：
type Props = {
children: JSX.Element;
};
export default function SiteLayout({ children }: Props): JSX.Element {
return (
<div>
{children}
</div>
)
但这会在子组件中产生以下错误。
（别名）函数SiteLayout（{children}:Props）：JSX。Element import SiteLayout
此JSX标记的“children”属性需要“Element”类型的单个子元素，但提供了多个子元素。ts（2746）
上述组件正在被下一个应用程序使用。js页面组件，如：
import Head from 'next/head';
import SiteLayout, { siteTitle } from '../../components/SiteLayout';
export default function myPage() {
const pageTitle = 'My Page';
return (
<SiteLayout>
<Head>
<title>{siteTitle + ' - ' + pageTitle}</title>
</Head>
<div>
content...
</div>
</SiteLayout>
);
}
正确的方法是什么？当JSX时，我感到困惑。应使用元素，并在反应时使用。FC应为空。
共有2个答案
你的函数正在返回一个React。FC类型，不应该是这样。函数组件的返回类型是ReactNode，加上React隐式提供的子元素。FC打字。如果显式键入它们，则可以省略React。FC和写：
const SiteLayout = ({children}: Props) => {
return (
<div>
{children}
</div>
)
}
函数的返回类型不是组件，函数本身是组件。这就是为什么
function SiteLayout({ children }: Props): React.FC { ...
应该是：
const SiteLayout: React.FC<Props> = ({ children }: Props) => {
return (
<div>
{children}
</div>
);
}
关于子节点的类型prop，如果对子节点的类型（字符串、布尔值、元素等）没有限制，最好使用ReactNode：
type Props = {
children: React.ReactNode
}
下面是它的定义。
-
描述 (Description) 您可以使用类型检查内置函数来确定匹配mixin的值类型。 为此，您可以使用is函数。 以下是可用功能列表 - iscolor isnumber isstring iskeyword isurl 上面列出的功能是基本类型检查。 您可以使用以下功能检查值是否在特定单元中 - ispixel ispercentage isem isunit 例子 (Example) 以
-
我有一个应用程序正在使用类组件开发react，我发现了一个功能的代码，我想添加到我的代码中，但它是使用功能组件制作的。代码在这里https://codesandbox.io/s/framer-motion-animate-in-view-gqcc8 但相关部分是这样的。 我不知道如何在我的类组件中添加那个控件变量 我应该把它添加到我的州吗？我不明白如何让它在类组件中工作
-
npm包允许我们在TypeScript应用程序中使用反应。我们将组件定义为 在这里，我们必须声明组件道具和状态的类型（在类型变量中）。 在我们声明了这些类型之后，TypeScript使用这些类型来验证组件的使用（传递给它的道具的形状）。 我想围绕这样一个组件创建一个容器。容器将重用组件的道具。但是为了用相同的道具创建另一个组件，我必须重新声明道具的类型。或者从原始零部件文件中导出它们并导入到容器中
-
我是wordpress/woocommerce的新手，刚刚开始创建自定义插件。 到目前为止，我已经通过api添加了自定义的woocommerce设置。 我遇到了一个问题，需要在“产品数据”选项卡中的单个产品上添加自定义字段。 我设法使用以下代码显示它： 但是现在我需要检查产品类型是简单的还是变化的。我尝试了以下方法： 但是，我得到一个错误： 我有一种很好的感觉，我正在尝试在产品类被调用之前启动它。
-
问题内容： 我可能在这里，但是我真的无法弄清楚我的代码出了什么问题： 输出为if语句从不触发。有人可以在这里发现我的错误吗？ 问题答案： 您的问题是您之前在代码中已将其重新定义为变量。这意味着当您执行if时会返回，因为它们不相等。 话虽如此，您应该在测试事物的类型时使用它，这不会避免覆盖问题，而是一种使用Python方式检查类型的方法。