如何将React生成的高亮文本元素转为可用HTML元素？

问题根源 #

你遇到的join(' ')输出[Object object]，是因为map返回的是JSX元素对象数组而非字符串，对象调用toString()自然会得到[object Object]。而用reduce拼接出嵌套数组，虽然直接渲染可能暂时正常，但组件中使用时会因为结构嵌套导致异常。

正确实现方式 #

直接在highlightText中生成包含空格文本节点的一维JSX数组，React可以直接渲染这种混合了元素和文本的数组：

highlightText = () => {
  const { questionItem } = this.props;
  const words = questionItem.split(/\s+/);
  
  return words.flatMap((word, index) => {
    // 最后一个单词后不加空格
    if (index === words.length - 1) {
      return <span key={index} className="highlighted-word">{word}</span>;
    }
    // 每个单词后拼接空格文本节点
    return [
      <span key={`word-${index}`} className="highlighted-word">{word}</span>,
      ' '
    ];
  });
}

在组件中使用 #

之后直接在组件里调用即可，不需要额外的reduce或拼接操作：

const text3 = <p>{this.highlightText()}</p>;

这样生成的text3是标准的React元素，可以直接在组件的render方法中使用。

原理说明 #

React支持渲染数组形式的子节点，数组中的元素可以是JSX元素或文本节点。flatMap会把嵌套的数组展开成一维数组，确保最终返回的是[<span>, ' ', <span>, ' ', ...]这样的结构，React能正确识别并渲染成带空格的高亮文本。

内容的提问来源于stack exchange，提问作者Navya Thakur