如何在返回子列或子数组映射时正确替换任何类型
我有一个React函数组件，它检查子元素是否是数组。如果它不是数组，则返回它。否则，它将映射到子程序上，并返回一些JSX。
import React from 'react'
interface Props {
children: React.ReactNode
}
const LineBreak: React.FC<Props> = ({ children }): any => {
if (!Array.isArray(children)) return children
return (
<>
{children.map((child, i, arr) => {
if (i + 1 === arr.length) return child
return <>{child}<br /></>
})}
</>
)
}
export default LineBreak我想要做的是替换第7行中的any。我从逻辑上认为，将其更改为React.ReactNode就足够了，但这会引发类型错误：
类型'({子}：PropsWithChildren) => ReactNode‘不能指定为“FC”。输入'ReactNode‘不能指定键入'ReactElement’。类型'string‘不能分配到键入'ReactElement’. to (2322)
我确实需要一些关于如何正确读取这些错误消息的提示。
我还试图通过将返回类型更改为string|React.ReactNode来绕过此错误消息，并期望得到相同的错误，因为根据我有限的类型记录知识，React.ReactNode包含类型字符串。
回答 3
Stack Overflow用户
发布于 2020-11-30 19:04:54
@amaster的解决方案是好的。只是增加了我对错误信息的理解
我认为这就是错误的含义。
错误是说FC<Props>的预期返回类型是ReactElement<any, any>
所以Type '({ children }: PropsWithChildren<Props>) => ReactNode' is not assignable to type 'FC<Props>'.意味着返回类型ReactNode与预期的FC<Props>返回类型不匹配
Type 'ReactNode' is not assignable to type 'ReactElement<any, any>'.表示您正在尝试将ReactNode指定为返回类型，而不是预期的ReactElement<any, any>。
Stack Overflow用户
发布于 2020-11-30 18:51:34
我能够用两种不同的方法解决这个问题。
- 从函数.
中删除React.FC类型
import React from 'react'
interface Props {
children: React.ReactNode
}
const LineBreak = ({children}: Props): React.ReactNode => {
if (!Array.isArray(children)) return children
return (
<>
{children.map((child, i, arr) => {
if (i + 1 === arr.length) return child
return <>{child}<br /></>
})}
</>
)
}
export default LineBreak- 将单个子包在片段的内部。
import React from 'react'
interface Props {
children: React.ReactNode
}
const LineBreak: React.FC<Props> = ({children}): JSX.Element => {
if (!Array.isArray(children)) return <>{children}</>
return (
<>
{children.map((child, i, arr) => {
if (i + 1 === arr.length) return child
return <>{child}<br /></>
})}
</>
)
}
export default LineBreak据我现在所理解，React.FC只能是JSX.Element的返回类型或等效类型。虽然子类型可能是字符串，但布尔值，{}不符合JSX.Element类型。因此，如果我想控制返回类型，那么我必须删除React.FC，或者如果我想使用React.FC，那么我需要将子片段的返回包装在片段中，这样它就可以正确地将各种子类型作为有效的JSX.Element类型返回。
Stack Overflow用户
发布于 2022-08-09 08:36:14
修复方法是返回用于ReactElement的FC。但是，您也必须设置children。
import React from 'react'
interface Props {
children: React.ReactElement
}
const LineBreak: React.FC<Props> = ({ children }): React.ReactElement => {
if (!Array.isArray(children)) return children
return (
<>
{children.map((child, i, arr) => {
if (i + 1 === arr.length) return child
return (
<>
{child}
<br />
</>
)
})}
</>
)
}
export default LineBreakhttps://stackoverflow.com/questions/65078600
复制相似问题
腾讯云开发者
