![](/img/trans.png)
[英]Typescript error: Property 'children' is missing in type but required in type 'CommonProps'
[英]Property 'children' is missing in type
我正在嘗試使用babel-loader和ts-loader使用 Typescript 設置 Storybook。
除了在 React 組件中使用children
組件外,一切正常:
[tsl] ERROR in .../stories/index.stories.tsx(8,56)
TS2769: No overload matches this call.
Property 'children' is missing in type '{ title: string; }' but required in type 'Props'.
這是.storybook/main.js
文件:
module.exports = {
addons: [
"@storybook/addon-knobs",
],
stories: ["../packages/**/*.stories.tsx"],
webpackFinal: async config => {
config.module.rules.push({
test: /\.(ts|tsx)$/,
exclude: /node_modules/,
use: [
{
loader: require.resolve('ts-loader')
},
{
loader: require.resolve('babel-loader'),
options: {
presets: [
"@babel/preset-env",
"@babel/preset-react"
]
}
}
],
});
config.resolve.extensions.push('.ts', '.tsx');
return config;
}
};
這是index.stories.tsx
文件:
import React from "react";
import Collapsible from "../src";
export default {
title: "Collapsible"
};
const content = <span>Content</span>;
export const simpleCollapsible = () => (
<Collapsible title="Collapsible">{content}</Collapsible>
);
這是 Collapsible 的實現:
import React, { ReactNode, useState } from "react";
import styled, { ThemeProvider } from "styled-components";
import {
BorderProps,
ColorProps,
FlexboxProps,
LayoutProps,
SpaceProps,
TypographyProps
} from "styled-system";
import Theme from "@atw/theme";
import { KeyboardArrowDown } from "@styled-icons/material";
import Box from '~/box';
import Button from '~/button';
interface Props
extends BorderProps,
ColorProps,
FlexboxProps,
LayoutProps,
SpaceProps,
TypographyProps {
children: ReactNode;
title: string;
}
const Collapsible = ({ children, title, ...rest }: Props) => {
const [isCollapsed, setIsCollapsed] = useState(false);
const handleCollapse = () => {
setIsCollapsed(!isCollapsed);
};
return (
<ThemeProvider theme={Theme}>
<Button
border="none"
padding={0}
marginBottom={2}
width={1}
textAlign="start"
onClick={handleCollapse}
{...rest}
>
<IconBox isCollapsed={isCollapsed}>
<KeyboardArrowDown size="24px" />
</IconBox>
{title}
</Button>
{!isCollapsed && (
<Box display="flex" flexDirection="column">
{children}
</Box>
)}
</ThemeProvider>
);
};
export default Collapsible;
這里有什么我做錯了嗎?
一種可能的解決方案是利用功能組件中的默認子級機制React.FC
,它允許您掛載子級,而無需在類型定義中明確將它們包含為 prop。 對於您的情況,可以通過應用以下更改來實現:
interface Props
extends BorderProps,
ColorProps,
FlexboxProps,
LayoutProps,
SpaceProps,
TypographyProps {
title: string;
}
const Collapsible: React.FC<Props> = ({ children, title, ...rest }) => {
...
};
添加 React.FC:它已經為你聲明了孩子。 並在 React 中添加您的自定義道具。
你的代碼應該是這樣的:
const Collapsible : React.FC<Props> = ({ children, title, ...rest }) => {
interface Props extends BorderProps,
ColorProps,
FlexboxProps,
LayoutProps,
SpaceProps,
TypographyProps {
children: ReactNode; // as React.FC declares it for you, just delete this line
title: string;
}
沒有第 3 步 :)
我添加了Babel Preset Typescript ,錯誤消失了。
這就是我的.storybook/main.js
現在的樣子:
module.exports = {
addons: [
"@storybook/addon-knobs",
],
stories: ["../packages/**/*.stories.tsx"],
webpackFinal: async config => {
config.module.rules.push({
test: /\.(ts|tsx)$/,
exclude: /node_modules/,
use: [
{
loader: require.resolve('ts-loader'),
options: {
configFile: '../tsconfig.json',
transpileOnly: true
}
},
{
loader: require.resolve('babel-loader'),
options: {
presets: [
"@babel/preset-env",
"@babel/preset-react",
"@babel/preset-typescript"
]
}
}
],
});
config.resolve.extensions.push('.ts', '.tsx');
return config;
}
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.