功能组件类型的问题

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 props。一切正常都很好，但是如果我将所有内容都放在上面时，我会继续得到此错误：

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)

我的问题是 - 如何正确地为此组成部分及其道具进行典型典型？

ps 我尝试将 s 和 str 值放入返回语句中的值值＆lt;＆gt; {..} ＆gt; ，但这无济于事。

Answer 1

您必须确保在所有情况下都返回适当的JSX。
现在，React期望将单个包装元素节点返回您可以生孩子的内部。
在第二个语句中，您将返回多个＆lt; span＆gt; 元素，但没有父母。也只用片段包裹一点：

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;