函数转React组件后对象解构失效问题求助

核心问题是函数调用传参和React组件传参的逻辑差异：

• 原来的renderLetter函数，你直接把letters[num]（对象/undefined）作为第一个参数传入，函数参数里的{ letter, status }是直接解构这个传入的对象，所以能正确拿到对应的属性。
• 改成Letter组件后，你把letters[num]赋值给了组件的letter属性，此时组件接收的props是{ letter: letters[num], num: num }，你在组件里解构的是props对象的letter和status——但props里根本没有status属性，letter则是整个letters[num]对象，这就是为什么你看到letter是对象、status是undefined。

修复方案 #

方案1：展开对象作为组件props（推荐） #

直接把letters[num]的所有属性展开传递给Letter组件，这样组件的props就会包含letter和status属性，和原来函数接收的参数逻辑一致：

修改Guess组件中的渲染代码：

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

注意：React列表渲染的key要放在组件本身上，而不是组件内部的元素上，所以这里把key={num}加到<Letter>标签上。

方案2：在Letter组件中嵌套解构 #

如果不想修改传参方式，可以在Letter组件的props解构里，先拿到letter对象，再解构它的属性：

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

这种方式可读性稍差，不如方案1直观，更推荐方案1。

额外优化建议 #

• guessEmpty可以简化为const guessEmpty = guess === undefined;，不需要三元判断返回布尔值。
• 当guessEmpty为true时，letters是false，此时letters[num]会是undefined，展开传递给组件也没问题，因为组件的默认值会生效。

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