功能组件类型的问题

Question

我为文本高亮编写了这个组件:

import { FC } from 'react'
import './Highlight.css'
interface HighlightProps {
filter: string
str: string 
}
const Highlight: FC<HighlightProps> = ({filter, str}) =>{
if (!filter) return str
const regexp = new RegExp(filter, 'ig')
const matchValue = str.match(regexp)
if (matchValue) {
return str.split(regexp).map((s: string, index: number, array: string[]) => {
if (index < array.length - 1) {
const overlap = matchValue.shift()
return (
<span key={index}>
{s}<span className='highlight'>{overlap}</span>
</span>
)
}
return s
})
}
return str
}
export default Highlight

取filter: string和str: string道具。一切都很好，但是如果我保持上面的一切不变，我就会一直得到这个错误:

Type '({ filter, str }: HighlightProps) => string | (string | Element)[]' is not assignable to type 'FC<HighlightProps>'.
Type 'string | (string | Element)[]' is not assignable to type 'ReactElement<any, any> | null'.
Type 'string' is not assignable to type 'ReactElement<any, any>'.ts(2322)

我的问题是我怎样才能正确地为这个组件和它的道具设置类型?

注:我试图将s和str值在返回语句中放入<>{..}</>，但它没有帮助。

Answer 1

您必须确保在所有情况下都返回正确的JSX。
现在react期望返回一个单独的包装Element Node，你可以在里面有你的孩子。在第二个if语句中，您将返回多个<span>元素，但没有父元素。只需要用Fragments来包裹位:

import { FC } from "react";
import "./Highlight.css";
type HighlightProps = {
filter: string;
str: string;
};
const Highlight: React.FC<HighlightProps> = ({ filter, str }) => {
if (!filter) return <>str</>;
const regexp = new RegExp(filter, "ig");
const matchValue = str.match(regexp);
if (matchValue) {
return (
<>
{str.split(regexp).map((s: string, index: number, array: string[]) => {
if (index < array.length - 1) {
const overlap = matchValue.shift();
return (
<span key={index}>
{s}
<span className="highlight">{overlap}</span>
</span>
);
}
return s;
})}
</>
);
}
return <>str</>;
};
export default Highlight;

沙箱