Definitelytyped: React 구성 요소는 ReactNode를 반환해야 하거나 자식은 ReactElement여야 합니다.

index.d.ts 에 대해 다음 수정을 시도했습니다.

-        render(): JSX.Element | null | false;
+        render(): ReactNode;

-        (props: P & { children?: ReactNode }, context?: any): ReactElement<any> | null;
+        (props: P & { children?: ReactNode }, context?: any): ReactNode;

하지만 수정하는 방법을 잘 모르겠는 보풀을 시도할 때 여기저기서 오류가 발생했습니다.

TypeScript compile error: JSX element type 'ReactNode' is not a constructor function for JSX elements.

아니요, 이 변경 사항은 올바르지 않습니다. 현재 React에서 여러 요소를 반환할 수 없습니다. 어디선가 하시더라도 아마 어떻게든 하나에 캡슐화 되어 있을 것입니다.
Fiber가 있는 React 16에서만 가능합니다. :)

그들이 반응 동작을 변경했는지 확실하지 않지만 redux / react 작성자는 https://egghead.io/lessons/ 에서 볼 수 있듯이 얇은 래퍼를 생성하기 위해 this.props.children을 반환하는 기능을 보여주었습니다(요소에 childContext를 추가하기 위해서만).

react-native를 사용하면 렌더링에서 JSX 요소의 배열을 반환할 수 있습니다. 해결 방법은 this.props.children 를 React.Children.only(this.props.children) 로 래핑하는 것이며 루트로 요소가 둘 이상 있으면 throw됩니다.

네, React.Children.only 를 사용할 수 있지만 ReactNode 와 ReactElement 는 모두 this.props.children 의 유효한 값입니다.

const Title = props => <h1>{props.children}</h1>;
<Title>Woah</Title>

유효하고 합리적인 React 코드입니다.

반응 16에서 요소 배열을 반환할 수 있지만 TS는 할 수 없다고 생각하기 때문에 오류가 발생합니다.

편집: 이것을 수정하려면 children: JSX.Element[]; 하세요.

지금까지의 경험에 따르면 ReactNode가 유효해야 합니다.

const Id: React.SFC<{}> = (props) => props.children

const App = ()= > <Id>This should work but instead fails</Id>

이것이 @types/react 에 반영될 가능성이 있습니까?

이것이 없으면 React children을 입력할 수 없습니다.

이 문제를 해결하기 위해 현재 children 를 React.Fragment 에 래핑하고 있습니다.

업데이트가 있습니까?

이것이 children 를 React.Fragment 에 래핑하는 것보다 다소 정확한지 확실하지 않지만 운이 좋았습니다.

return (children as React.ReactElement);

return <>{foo(}</>; 밤새도록. <> 는 해결 방법입니다.

이것은 나에게도 문제를 일으키고 있습니다.

TL;DR:

주어진 구성 요소에 소품을 추가하는 HOC가 있고 return children; 있는 기능 구성 요소와 함께 사용하려고 합니다. 해결 방법 return <>{children}</>; 을 사용하는 경우에만 작동합니다.

자세한 내용은:

다음은 HOC의 단순화된 버전입니다.

export interface ExtraProps {
  extraProp1: string;
}

export const withExtraProps = <P extends object>(Component: React.ComponentType<P>) => {
  return class extends React.Component<Omit<P, keyof ExtraProps>> {
    render() {
      const extraProps = {
        extraProp1: 'test'
      };

      return (
        <Component {...this.props as P} {...extraProps} />
      )
    }
  }
}

다음은 기능 구성 요소의 단순화된 버전입니다.

interface ComponentProps extends ExtraProps {
  children?: React.ReactNode;
  loadingComponent?: ReactElement;
}

export function ExampleComponent(props: ComponentProps) {
  const { children, loadingComponent } = props;

  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      await someAsyncCall();
      setLoading(false);
    }

    fetchData();
  });

  if (loading) {
    return loadingComponent || null;
  }

  return children;
}

// This line errors:
export const FeatureFlag = withExtraProps(ExampleComponent);

다음 오류가 발생합니다.

Argument of type '(props: ComponentProps) => {} | null | undefined' is not assignable to parameter of type 'ComponentType<ComponentProps>'.
  Type '(props: ComponentProps) => {} | null | undefined' is not assignable to type 'FunctionComponent<ComponentProps>'.
    Type '{} | null | undefined' is not assignable to type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)> | null'.
      Type 'undefined' is not assignable to type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)> | null'.

ExampleComponent에 ReactElement | null 의 반환 유형을 추가하면 HOC에 전달하는 것에 대해 불평하지 않지만 자식을 반환하는 경우 여전히 오류가 발생합니다.

export function ExampleComponent(props: ComponentProps): ReactElement | null {
  ...
  ...
  return children; // Type 'ReactNode' is not assignable to type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)> | null'.

}

여기에 있는 다른 사람들과 마찬가지로 return <>{children}</>; 로 변경하면 작동하지만 거칠고 불필요하게 느껴집니다.

@kyrstenkelly 와 _정확한_ 동일한 문제가 있습니다. HOC 함수가 자식을 렌더링하는 React.FC 전달됩니다.

<> children(...) </> 수정이 작동하지만 더 나은 솔루션이 아직 있습니까?

또한이 문제가 있습니다! 현재 React.Fragment로 솔루션을 래핑하는 제안 솔루션을 수행 중입니다.

여기도 마찬가지

interface IIntlMessageProps {
    id: string;
    valuesGiven?: {[key:string]:string};
}

// this doesn't work - -- TS2769 Type 'null' is not assignable to type '(nodes:ReactNodeARray) => ReactNode' | ... | undefined
export const IntlMessage: React.FC<IIntlMessageProps> = (props) => {
    return (
        <FormattedMessage id={props.id} values={props.valuesGiven}>
            {props.children}
        </FormattedMessage>
    )
};
//Nope -- TS2769 Type 'Element' is not assignable to type '(nodes:ReactNodeARray) => ReactNode'
export const IntlMessage: React.FC<IIntlMessageProps> = (props) => {
    return (
        <FormattedMessage id={props.id} values={props.valuesGiven}>
            <React.Fragment>{props.children}</React.Fragment>
        </FormattedMessage>
    )
};

// Nope -- TS2769 Type 'Element' is not assignable to type '(nodes:ReactNodeARray) => ReactNode'
export const IntlMessage: React.FC<IIntlMessageProps> | null = (props) => {
    return (
        <FormattedMessage id={props.id} values={props.valuesGiven}>
            <>{props.children}</>
        </FormattedMessage>
    )
};

// Nope -- TS2769 Type '{}' is not assignable to type '(nodes:ReactNodeARray) => ReactNode'
export const IntlMessage: React.FC<IIntlMessageProps> = (props) => {
    return (
        <FormattedMessage id={props.id} values={props.valuesGiven}>
            {props.children ? props.children : undefined}
        </FormattedMessage>
    )
};

나는 여기에 조언 된 모든 것을 시도했다고 생각합니다 ... :( 어떤 단서?

해결책은 조각으로 포장해야한다는 것입니다.

import React from 'react'

const Something: React.FC = ({ children }) => (
 <> { children } </>
)

이렇게 하면 Type '({ children }: { children?: ReactNode; }) => ReactNode' is not assignable to type 'FunctionComponent 오류가 수정 됩니다.

가능하면 조각을 피하고 JSX 유형 시스템이 JavaScript 및 Flow React가 지원하는 것과 동일한 종류의 구성을 지원하도록 하여 TypeScript가 타사 라이브러리 패턴과 더 잘 작동하도록 하고 싶습니다.

내가 찾은 또 다른 비이상적인 것은 조각이 구성 요소 트리, 특히 유틸리티/래퍼 구성 요소(case-in-point: react-placeholder)에서 심화된다는 것입니다. React.ReactElement 로 캐스팅하는 것이 이러한 종류의 라이브러리에서 더 나은 접근 방식처럼 보이지만 캐스팅할 필요가 없습니다.

해당 유형을 변경하기 위한 접근 방식을 시도했지만 새로운 유형의 기능 구성 요소를 사용하여 JSX 유형 검사에 갇히게 되었습니다. 아직 지점이 있고, 도움을 요청하는 PR을 했다고 맹세할 수 있었지만 다시 찾을 수 없습니다...

좋습니다. 유형이 노드 배열을 허용하지 않아야 하는 경우 ReactText , ReactPortal , boolean , null 및 undefined 를 허용하지 않아야 한다는 의미는 아닙니다. ReactElement 의 사용법.

이러한 추가 유형을 금지하는 이유는 무엇입니까?