将字符串转为JSX组件时格式异常，寻求解决方法

你的代码问题出在处理逻辑上：先把空格替换成, 再用逗号分割，导致每个单词前后都带有空格，最终渲染时出现多余空格，破坏了句子的连贯性。

以下是修正后的代码，直接按原始空格分割单词，同时保留句子的正常空格结构：

function App() {
  const text = "Please make sure this is BUTTON";
  // 按空格分割成独立单词
  const parts = text.split(" ");
  const mapped = parts.map((part, index) => {
    // 给非首个单词前添加空格
    const spacePrefix = index > 0 ? " " : "";
    return part.match(/BUTTON/) ? (
      <>
        {spacePrefix}
        <button>{part}</button>
      </>
    ) : (
      `${spacePrefix}${part}`
    );
  });
  return <div>{mapped}</div>;
}

也可以用reduce更简洁地实现：

function App() {
  const text = "Please make sure this is BUTTON";
  const mapped = text.split(" ").reduce((result, part) => {
    if (result.length > 0) {
      result.push(" ");
    }
    result.push(part.match(/BUTTON/) ? <button>{part}</button> : part);
    return result;
  }, []);
  return <div>{mapped}</div>;
}

这两种方式都会保留原句的连贯格式，同时将指定单词转换为button组件。

内容的提问来源于stack exchange，提问作者Mark Dev