Question

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

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

但是，使用上面的代码，我从Typescript得到了以下消息：

JSX元素类型“组件”没有任何构造或调用签名。ts（2604）

我已经阅读了other answers on this topic的相关内容，但仍未得出答案。

Answer 1

<Component />是JSX表示法，它基本上是在告诉React渲染此组件。只有在必须返回JSX代码的React Component中才有可能。要解决该问题，您只需检查参数是否为有效元素，然后有条件地将其呈现在所需的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>
  )
}

使用Typescript将prop渲染为字符串或组件

1 个答案: