javascript - 使用 Typescript 将渲染属性作为字符串或组件

我有一个函数，根据 prop 的类型有条件地渲染/返回一个字符串或一个动态组件：

const renderValue = (value: string | React.ReactNode) => {
  if (React.isValidElement(value)) {
    const Component = value
    return <Component />
  }
  return value
}

然而，使用上述代码时，我从 Typescript 得到了以下信息：

JSX 元素类型 'Component' 没有任何构造或调用签名.ts(2604)

我已经阅读了关于这个话题在 SO 上的其他答案，但仍然没有得出结论。

答案＃1

<Component /> 是 JSX 表示法，它基本上是在告诉 React 渲染这个组件。这只可能在 React Component 中实现，该组件必须返回 JSX 代码。要解决这个问题，你可以先检查参数是否是有效元素，然后在所需的 React Component 中有条件地渲染它。

import React from 'react'

interface Props {
   value: string | React.ReactNode
}

const SomeComponent:React.FC<Props> = ({value}) => {
  return (
    <div>
      <span>Hello World</span>
      {React.isValidElement(value) ? <Component/> : value}
    </div>
  )
}