React递归组件反转字符串丢失末尾字符，如何修复？

问题根源 #

你遇到的问题大概率是递归的终止条件错误：当字符串长度仅剩1个字符时，组件没有返回该字符，直接返回了空值，导致最后一个字符被丢弃。比如原字符串的最后一个字符“!”在递归到长度为1时没有被渲染。

修复方案 #

调整递归终止条件，确保所有字符都被处理：

function RecursiveComponent({ str }) {
  // 终止条件：字符串为空时停止递归
  if (str.length === 0) return null;
  
  // 截取除第一个字符外的剩余字符串
  const remainingStr = str.slice(1);
  
  return (
    <>
      {/* 先递归处理剩余字符串，再渲染当前第一个字符，实现反转 */}
      <RecursiveComponent str={remainingStr} />
      {str[0]}
    </>
  );
}

// App组件示例
function App() {
  return <RecursiveComponent str="Hello world!" />;
}

逻辑说明 #

1. 终止条件改为str.length === 0返回null，确保当字符串只剩最后一个字符时，会进入递归调用（此时remainingStr为空，递归返回null），然后渲染当前的str[0]（也就是原字符串的最后一个字符）。
2. 递归逻辑：先处理剩余字符串的反转，再拼接当前字符，最终得到完整的反转结果。

测试上述代码，输入“Hello world!”会正确渲染出“!dlrow olleH”。

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