函数解构与 React 组件解构的区别

Question

我在函数参数中的对象解构方面遇到了一个非常令人沮丧的问题。我的一个组件中有以下代码：

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]

（可以是对象或未定义）传递到我的

renderLetter

函数时，我的

letter

和

status

输入参数将转换为未定义或字符串，具体取决于通过对象解构的输入。这一切都很棒。

但是，我现在想将其移动到新组件，而不是使用

<span>

函数渲染

renderLetter

元素。该组件的代码是：

import React from "react";

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

export default Letter;

与我调用

renderLetter

函数的方式类似，我现在尝试渲染组件：

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

但是，当在

letter

组件内记录

status

和

Letter

参数时，

letter

参数返回一个对象，而

status

参数返回 undefined。因此，我假设我在正确解构输入时搞砸了。

但是，我不明白为什么，因为在同一组件内使用函数时，以完全相同的方式执行此操作确实有效，而在将代码传输到单独的组件时却不起作用。

任何解决这个问题的帮助将不胜感激！

Answer 1

你们非常接近。当您将

renderLetter

函数转换为完整组件时，您忘记了 React 组件的第一个参数是 props 对象。由于您现在将

letters[num]

作为 prop 传递，因此它将到达

letter

键下的 props 对象。

// A component like this:
<Letter letter={letters[num]} num={num} />

// Results in a props object like this:
{
  letter: {
    letter: '',
    status: ''
  },
  num: 0
}

您的解构需要在组件中考虑到这一点：

function Letter({ letter: { letter, status } }) {
 ...
}