Javascript 功能中的析构与react 组件中的析构的区别

我遇到了一个非常令人沮丧的问题，关于我的函数参数中的对象解构.我在一个组件中有以下代码:

import React from "react";
import { range } from "../../utils";
import { checkGuess } from "../../game-helpers";

function Guess({ guess, answer }) {
  const guessEmpty = guess === undefined ? true : false;
  const letters = !guessEmpty && checkGuess(guess.value, answer);

  function renderLetter({ letter = undefined, status = undefined } = {}, num) {
    return (
      <span className={`cell ${status}`} key={num}>
        {letter}
      </span>
    );
  }

  return (
    <>
      {
        <p className="guess">
          {range(5).map((num) => renderLetter(letters[num], num))}
        </p>
      }
    </>
  );
}

export default Guess;

letters常量是一个数组，它将设置为false或由对象列表组成，具体取决于Guess函数的guess输入参数是否为空.

当我将letters[num](它可以是一个对象，也可以是undefined)传递到renderLetter函数中时，我的letter和status输入参数要么被转换为undefined，要么被转换为字符串，这取决于通过对象解构的输入.一切都很顺利.

但是，我现在不是使用renderLetter函数来呈现<span>个元素，而是希望将其移动到一个新组件.此组件的代码为:

import React from "react";

function Letter({ letter = undefined, status = undefined } = {}) {
  return (
    <>
      <span className={`cell ${status}`}>{letter}</span>
    </>
  );
}

export default Letter;

与我调用renderLetter函数的方式类似，我现在正在try 呈现组件:

return (
    <>
      {
        <p className="guess">
          {range(5).map((num) => (
            <Letter letter={letters[num]} num={num} />
          ))}
        </p>
      }
    </>
  );
}

但是，当在Letter组件中记录letter和status参数时，letter参数返回一个对象，status参数返回undefined.因此，我假设我在正确地解构输入时搞砸了.

然而，我不明白为什么，因为当在同一组件中使用函数时，这种完全相同的方法确实有效，而当将代码转移到单独的组件时，它不起作用.

任何帮助弄清楚这一点的人都将不胜感激！