기능 구성 요소 정적 속성 반응

기능 구성 요소 정적 속성 반응

정적 속성으로 다른 클래스 구성 요소가 있는 클래스 구성 요소가 있었습니다.이제 기능 구성 요소로 전환했는데 정적 속성을 유지하는 방법을 모르겠습니다.

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;
}

그러나 오류가 발생했습니다. 'Fieldset' 속성이 'FunctionComponent'.ts(2339) 유형에 없습니다.

도와드릴까요?

암시적 타이핑 사용(최적의 솔루션)

다음은 정적 속성을 명시적으로 입력할 필요가 없는 접근 방식을 보여줍니다.저는 개인적으로 이것이 가장 짧고 깨끗한 방법이기 때문에 다른 어떤 해결책보다 이것을 선호합니다.

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

위해서static함수 자체에 선언하는 함수의 속성.

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

구성 요소에서 propTypes를 설정하는 경우에도 유사한 접근 방식을 볼 수 있습니다.TS에서는 다음과 같이 보일 것으로 가정합니다.

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

React.FunctionComponent범위는 순수하게 내부에 있습니다.key props에 없는 속성을 추가하려는 경우에는 작동하지 않습니다.props키. 제대로 입력하기 위해서는 직접 활자를 만들어서 확장해야 합니다.

그런 다음 함수 외부에 할당합니다.

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

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

Panel.Fieldset = PanelFieldset;

유형 스크립트 컴파일러는 함수에 정의되지 않은 속성을 사용하고 있음을 알려줍니다.이동Panel.Fieldset = PanelFieldset;기능 부전의

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

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

언급URL : https://stackoverflow.com/questions/57712682/react-functional-component-static-property