Reactjs Can'；我不明白为什么我的JSX元素的动态连接没有'；行不通

我如何动态地创建JSX元素，使得一些字符串是粗体的，一些是代码？由于某种原因，我的算法实际上不起作用

换句话说，我收到一个如下所示的字符串：

Hello *Stackoveflow*, I try to do `React.js` today.

我尝试动态解析此字符串，并使其如下所示：

Hello *Stackoveflow*, I try to do `React.js` today.

你好Stackoveflow，我今天试着做

React.js

---

由于某种原因，它不起作用。 我解析我的字符串并尝试返回我创建的

JSX

元素：

export const Description = (props) => {
  const description = props.currentDescription.toString();

  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) {
        stringFlag = false;
        descriptionContent += stringContent;
        stringContent = "";
      } else {
        descriptionContent += <code>{codeContent}</code>;
        stringFlag = true;
        codeContent = "";
      }
    } else if (char === "*") {
      boldFlag = !boldFlag;

      if (boldFlag) {
        stringFlag = false;
        descriptionContent += stringContent;
        stringContent = "";
      } else {
        descriptionContent += <b>{boldContent}</b>;
        stringFlag = true;
        boldContent = "";
      }
    } else {
      if (codeFlag) {
        codeContent += char;
      }

      if (boldFlag) {
        boldContent += char;
      }

      if (stringFlag) {
        stringContent += char;
      }
    }
  }
  stringFlag = false;
  descriptionContent += stringContent;
  stringContent = "";

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

然而，作为回报，我收到了以下结果：

Hello [Object object], I try to do [Object object] today.

---

有人能帮我解决这个问题吗？

一个选项是从字符串创建JSX元素数组，而不是将字符串连接在一起

export const Description = (props) => {
  const description = props.currentDescription.toString();

  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) {
        stringFlag = false;
        descriptionContent.push(stringContent);
        stringContent = "";
      } else {
        descriptionContent.push(<code>{codeContent}</code>);
        stringFlag = true;
        codeContent = "";
      }
    } else if (char === "*") {
      boldFlag = !boldFlag;

      if (boldFlag) {
        stringFlag = false;
        descriptionContent.push(stringContent);
        stringContent = "";
      } else {
        descriptionContent.push(<b>{boldContent}</b>);
        stringFlag = true;
        boldContent = "";
      }
    } else {
      if (codeFlag) {
        codeContent += char;
      }

      if (boldFlag) {
        boldContent += char;
      }

      if (stringFlag) {
        stringContent += char;
      }
    }
  }
  stringFlag = false;
  descriptionContent.push(stringContent);
  stringContent = "";

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

您不能将（

+=

）JSX合并，因为它们是对象。通过使用

危险的HTML

可以从字符串中呈现HTML元素（但只能呈现HTML元素，不能呈现组件）

因此，此修复程序应该可以工作：

<li dangerouslySetInnerHTML={{ __html: descriptionContent }} />

请注意，这是正则表达式的一个用例，因此您可以进一步简化逻辑：

const generateReplacer = (regex, element) => (match) => {
  const fixedWord = match.replaceAll(regex, "");
  return `<${element}>${fixedWord}</${element}>`;
};

export const Description = (props) => {
  const description = props.currentDescription;

  return (
    <div className="description">
      <div
        dangerouslySetInnerHTML={{
          __html: description
            .replace(/\*.+\*/, generateReplacer("*", "strong"))
            .replace(/`.+`/, generateReplacer("`", "code"))
        }}
      />
    </div>
  );
};

const generateReplacer=（正则表达式，元素）=>（匹配）=>{
const fixedWord=match.replaceAll（regex，“”）；
返回`${fixedWord}`；
};
导出常量描述=（道具）=>{
const description=props.currentDescription；
返回(
);
};

我建议检查已经实现它的html库的标记