我有一个类组件,另一个类组件作为他的静态属性,现在我切换到一个函数组件,我不知道如何保持静态属性。
class Panel extends React.Component<Props> {
public static Fieldset = PanelFieldset;
}
class PanelFieldset extends React.Component<Props> {
...
}
class App extends React.Component<Props> {
public render() {
return (
<Panel>
<Panel.Fieldset>
...
</Panel.Fieldset>
</Panel>
)
}
}
现在,切换到功能组件:
const Panel: React.FunctionComponent<Props> = (props) => {
Panel.Fieldset = PanelFieldset;
}
但我得到了错误:类型"函数组件"上不存在属性"字段集"。ts(2339)
有人帮忙吗?
4条答案
按热度按时间qncylg1j1#
使用隐式类型(最佳解决方案)
下面介绍了一种不需要显式输入静态属性的方法,我个人更喜欢这种方法,因为它是最简洁明了的方法。
使用显式类型(以前的解决方案)
如果你想显式地输入你的静态属性,扩展@Andrew的答案,使用
typeof PanelFieldset
应该更方便地输入你的组件。**来源:**https:github.com/react-bootstrap/react-bootstrap/blob/master/src/Dropdown.tsx#L230-L237
noj0wjuj2#
对于函数上的
static
属性,您可以在函数本身上声明它们,即在组件上设置propTypes时可以看到类似的方法。我假设在TS中,它看起来像:
qyswt5oh3#
React.FunctionComponent
的作用域仅限于key
props
,您发现当您要添加不在props
键中的属性时,React.FunctionComponent
无法正常工作。为了正确键入它,您需要创建自己的类型并扩展它。之后,在函数外部对其赋值
w80xi6nr4#
类型脚本编译器提示您正在使用未在函数中定义的属性。请将
Panel.Fieldset = PanelFieldset;
移到de函数之外。