使用自定义条件渲染组件时，类型 JSX.Element 不可分配给类型 React.ReactNode

Question

I'm using next: "12.1.6" and react: "18.2.0".

I have a template component for conditional rendering.

// Show.tsx
interface Props {
  when: boolean;
  fallback?: React.ReactNode;
  children: React.ReactNode;
}

function Show(props: Props) {
  if (props.when) {
    return props.children;
  }
  return props.fallback ?? null;
}

export default Show;

and I use the template componenet like this but has an issue.

<Show
  when={connectionStatus}
  fallback={
    <div className="border rounded bg-red-400 py-2 px-5">
      ❌ disconnected
    </div>
    }
  >
  <div className="border rounded bg-green-400 py-2 px-5">
    ✅ connected
  </div>
</Show>

at fallback attribute, IDE represents an error "Type JSX.Element is not assignable to type React.ReactNode".

Both React.ReactElement and JSX.Element is a result of React.createElement so I thought there is no specific difference between them except namespace. But it seems React.ReactNode cannot cover JSX.Element .

Waht should I update or change?

Answer 1

ReactNode is a ReactElement, a ReactFragment, a string, a number or an array of ReactNode

But in here you are returning an HTML template which is not part of above mentioned categories. Hence you need to change the type to JSX.Element

fallback?: JSX.Element

Answer 2

Use Function to wrap fallback JSX Element,

like this:

<Show
  when={connectionStatus}
  fallback={() => {
    return <div className="border rounded bg-red-400 py-2 px-5">
      ❌ disconnected
    </div>
    }}
  >
  <div className="border rounded bg-green-400 py-2 px-5">
    ✅ connected
  </div>
</Show>

And update Props interface to:

interface Props extends React.PropsWithChildren<{
  when: boolean;
  fallback?: () => JSX.Element;
}> {}