typescript React功能组件静态属性

uoifb46i  于 2023-01-21  发布在  TypeScript
关注(0)|答案(4)|浏览(173)

我有一个类组件,另一个类组件作为他的静态属性,现在我切换到一个函数组件,我不知道如何保持静态属性。

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)
有人帮忙吗?

qncylg1j

qncylg1j1#

使用隐式类型(最佳解决方案)

下面介绍了一种不需要显式输入静态属性的方法,我个人更喜欢这种方法,因为它是最简洁明了的方法。

const PanelComponent: React.FC<Props> = (props) => {
 ...
}

export const Panel = Object.assign(PanelComponent, { PanelFieldset })

使用显式类型(以前的解决方案)

如果你想显式地输入你的静态属性,扩展@Andrew的答案,使用typeof PanelFieldset应该更方便地输入你的组件。

type IPanel<P> = React.FunctionComponent<P> & {
  Fieldset: typeof PanelFieldset; // add this
}

const Panel: IPanel<Props> = (props) => {
}

Panel.Fieldset = PanelFieldset;

**来源:**https:github.com/react-bootstrap/react-bootstrap/blob/master/src/Dropdown.tsx#L230-L237

noj0wjuj

noj0wjuj2#

对于函数上的static属性,您可以在函数本身上声明它们,即

function Panel() {
}
// static props
Panel.Fieldset = PanelFieldset

在组件上设置propTypes时可以看到类似的方法。我假设在TS中,它看起来像:

Panel.Fieldset: React.Component<Props> = PanelFieldset
qyswt5oh

qyswt5oh3#

React.FunctionComponent的作用域仅限于keyprops,您发现当您要添加不在props键中的属性时,React.FunctionComponent无法正常工作。为了正确键入它,您需要创建自己的类型并扩展它。
之后,在函数外部对其赋值

type IPanel<P> = React.FunctionComponent<P> & {
  Fieldset: any //whatever type it actually is
}

const Panel: IPanel<Props> = (props) => {
}

Panel.Fieldset = PanelFieldset;
w80xi6nr

w80xi6nr4#

类型脚本编译器提示您正在使用未在函数中定义的属性。请将Panel.Fieldset = PanelFieldset;移到de函数之外。

// Bad
function A() {
  A.B = 'hello'
}

// Good
function A() {}
A.B = "Here we go."

相关问题