动态生成含粗体与代码格式的JSX元素失败，寻求问题排查方案

我来帮你排查问题！你看到的[Object object]是因为错误地把字符串和JSX元素直接用+=拼接了——JSX本质是React元素对象，当你把对象和字符串相加时，JS会自动调用对象的toString()方法，结果就变成了[object Object]，而不是你期望的渲染出对应的标签。

正确的思路是用数组来存储所有要渲染的内容（包括普通字符串和JSX元素），因为React支持直接渲染数组，数组里的字符串和JSX元素会被正确解析渲染。

修改后的代码 #

export const Description = (props) => {
  const description = props.currentDescription.toString();
  // 改用数组存储内容，避免字符串与JSX拼接的问题
  let descriptionContent = [];
  let stringFlag = true;
  let stringContent = "";
  let codeFlag = false;
  let codeContent = "";
  let boldFlag = false;
  let boldContent = "";
  let char = "";

  for (let i = 0; i < description.length; i++) {
    char = description[i];
    if (char === "`") {
      codeFlag = !codeFlag;
      if (codeFlag) {
        // 激活代码模式前，先把当前普通字符串加入数组（非空才加）
        if (stringContent) {
          descriptionContent.push(stringContent);
          stringContent = "";
        }
        stringFlag = false;
      } else {
        // 关闭代码模式，把代码内容包装成<code>标签加入数组
        descriptionContent.push(<code>{codeContent}</code>);
        stringFlag = true;
        codeContent = "";
      }
    } else if (char === "*") {
      boldFlag = !boldFlag;
      if (boldFlag) {
        // 激活粗体模式前，先把当前普通字符串加入数组（非空才加）
        if (stringContent) {
          descriptionContent.push(stringContent);
          stringContent = "";
        }
        stringFlag = false;
      } else {
        // 关闭粗体模式，把粗体内容包装成<b>标签加入数组
        descriptionContent.push(<b>{boldContent}</b>);
        stringFlag = true;
        boldContent = "";
      }
    } else {
      // 同一时间只会有一个标记激活，用else if保证字符不会重复存储
      if (codeFlag) {
        codeContent += char;
      } else if (boldFlag) {
        boldContent += char;
      } else if (stringFlag) {
        stringContent += char;
      }
    }
  }

  // 循环结束后，把剩余的普通字符串加入数组（非空才加）
  if (stringContent) {
    descriptionContent.push(stringContent);
  }

  return <li className="description">{descriptionContent}</li>;
};

关键修改点说明 #

1. 用数组替代字符串存储内容：React可以直接渲染包含字符串和JSX元素的数组，避免了对象转字符串的问题；
2. 非空判断优化：切换模式或循环结束时，只在内容非空时才加入数组，避免渲染多余的空内容；
3. 互斥逻辑调整：把原代码中并列的if改成else if，确保每个字符只会被分配到一个内容变量中，避免重复存储。

这样修改后，就能正确渲染出你想要的效果：Hello <b>Stackoveflow</b>, I try to do <code>React.js</code> today.对应的JSX内容了。

内容的提问来源于stack exchange，提问作者Shir K