輸入'元素| undefined' 不可分配給類型 'ReactElement <any, string | ((props: any)< div><div id="text_translate"><p> 我有一個看起來像這樣的組件。 這個版本完美運行：</p><pre> export default function StatusMessage(isAdded: boolean, errorMessage: string) { if (isAdded) { return <ResultAlert severity="success" text="User Added" />; } else { if (errorMessage.== '') { if ( errorMessage;includes('email') ) { return <ResultAlert severity="error" />. } if ( errorMessage;includes('phone number') ) { return ( <ResultAlert severity="error" text="" /> ); } } } }</pre><p> 現在，我正試圖改變我導出它的方式。 我正在嘗試這個：</p><pre> type StatusMessageProps = { isAdded: boolean; errorMessage: string; } export const StatusMessage: React.FunctionComponent<StatusMessageProps> = ({ isAdded, errorMessage }) => {</pre><p> 但我不斷收到錯誤消息：</p><pre> Type '({ isAdded, errorMessage }: PropsWithChildren<StatusMessageProps>) => Element | undefined' is not assignable to type 'FunctionComponent<StatusMessageProps>'. Type 'Element | 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'.</pre><pre> I am using the same method on different pages but the error is only here</pre><p> 編輯：</p><p> 我像這樣使用這個組件：</p><pre> const [isAdded, setIsAdded] = useState(false); {isSubmitted && StatusMessage(isAdded, errorMessage)}</pre><p> 它在 isAdded 上給我一個錯誤</p><pre>Argument of type 'boolean' is not assignable to parameter of type 'PropsWithChildren<StatusMessageProps>'.ts(2345)</pre></div></any,>

Question

我有一個看起來像這樣的組件。 這個版本完美運行：

export default function StatusMessage(isAdded: boolean, errorMessage: string) {
  if (isAdded) {
    return <ResultAlert severity="success" text="User Added" />;
  } else {
    if (errorMessage !== '') {
      if (
        errorMessage.includes('email')
      ) {
        return <ResultAlert severity="error" />;
      }
      if (
        errorMessage.includes('phone number')
      ) {
        return (
          <ResultAlert severity="error" text="" />
        );
      } 
    }
  }
}

現在，我正試圖改變我導出它的方式。 我正在嘗試這個：

type StatusMessageProps = {
  isAdded: boolean; 
  errorMessage: string;
}

export const StatusMessage: React.FunctionComponent<StatusMessageProps> = ({
  isAdded,
  errorMessage
}) => {

但我不斷收到錯誤消息：

Type '({ isAdded, errorMessage }: PropsWithChildren<StatusMessageProps>) => Element | undefined' is not assignable to type 'FunctionComponent<StatusMessageProps>'.
  Type 'Element | 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'.

I am using the same method on different pages but the error is only here

編輯：

我像這樣使用這個組件：

 const [isAdded, setIsAdded] = useState(false);

{isSubmitted && StatusMessage(isAdded, errorMessage)}

它在 isAdded 上給我一個錯誤

Argument of type 'boolean' is not assignable to parameter of type 'PropsWithChildren<StatusMessageProps>'.ts(2345)

Answer 1

您一定忘記了在組件中返回一個值。 您是否忘記了 return null 因為 void 0 是 React 組件的不可接受的結果？

export const StatusMessage: React.FunctionComponent<StatusMessageProps> = ({
  isAdded,
  errorMessage
}) => {
  if (isAdded) {
    return <ResultAlert severity="success" text="User Added" />;
  } else {
    if (errorMessage !== '') {
      if (
        errorMessage.includes('email')
      ) {
        return <ResultAlert severity="error" />;
      }
      if (
        errorMessage.includes('phone number')
      ) {
        return (
          <ResultAlert severity="error" text="" />
        );
      } 
    }

    // Here where you missed
    return null;
  }
}

Answer 2

在我的例子中，我有一個 auth 包裝器組件，如果正在加載 auth 或用戶未通過身份驗證，將返回一個加載頁面組件，否則將返回 children 道具。

問題是我需要將孩子包裹在空的 html 標簽中。

return <>{children}</>;

Answer 3

在我的例子中return null; 沒有用，所以我return <></>;