从后端 API 获取数据时是否需要 React 组件道具？

Question

与任何其他应用程序一样，为了呈现我的 React 应用程序的特定部分，我希望从我的后端 API 接收项目列表。我创建了一个典型的 Card 组件来显示每个项目的数据。这个 Card 组件有一个父组件，它对所有项目都是通用的。应该是这样的：

<ParentComponent>
 <CardItem headline image/>
</ParentComponent>

道具headline和image是必需的，所以理论上，我应该总是从我的API接收它们。因此，我在组件中根据需要设置了这些道具：

CardItem.propTypes = {
  headline: PropTypes.string.isRequired,
  image: PropTypes.string.isRequired,
}

众所周知，随着应用程序的增长，由于某些特定原因，即使需要这些道具，我也可能会收到未定义的值。出于这个原因，我喜欢做我的组件防弹，即使这些道具是必需的，我总是做一个条件渲染来避免应用程序崩溃：

{headline && (
  <Component/>
)}

对于其他组件，我只在最顶部检查 prop 是否存在，否则，我返回 null：

if (!itemId) return null

在对我的组件进行单元测试时，我会确保测试此行为，这样如果我从我的 API 收到任何未定义的值，应用程序就不会中断。我意识到 Jest 一直因此警告我：

警告：失败的道具类型：道具标题被标记为 CardItem 中的必填项，但其值未定义。

这让我怀疑我的方法是不是正确的，所以我怀疑：

1. 我的方法是否正确，是否有办法避免 Jest 上出现这些警告？
2. 从 API 接收数据时是否应该永远不需要组件的 props？
3. 如果 props 不存在，父组件不应该渲染子组件，而不是检查子组件？ - 这个感觉根本不是正确的，但我添加它以防万一它是一种有效的方法。

请不要让您的回复受到我正在检查 headline 或 image 之类的道具这一事实的影响，我知道这样的事情我总是可以有条件地渲染。多想想 itemId 或类似的情况，它们是正确渲染/行为 100% 所需的道具。

Answer 1

在组件中，有一个defaultProps的选项。

在这种情况下，您没有收到来自 API 的道具。您可以为组件提供自己的 defaultProps。

如果您使用的是功能组件，它会是这样的组件外

CardItem.defaultProps = {
    headline: "YOUR_DEFAULT_VALUE",
    image: "YOUR_DEFAULT_VALUE",
}

如果您使用的是类组件，它会是这样的类内

static defaultProps = {
   headline: "YOUR_DEFAULT_VALUE",
   image: "YOUR_DEFAULT_VALUE",
}

通过这样做，您不需要验证道具

Answer 2

看到可能有多种情况， 1. 孩子的数据完全依赖父母。在这种情况下，如果道具未定义/为空，则父级不应渲染子级。即儿童的渲染应该是防弹的。 2. 如果孩子在某种意义上是独立的，那么如果父母以某种方式不为其提供道具并且仍然可以使用一些默认值，那么您可以渲染孩子。但是你想采用的方法来了，正如上面的答案中提到的那样，有 defaultProps。但如果你不想去，那么你可以尝试这样的事情，

interface ComponentProps {
prop1?: string;
prop2?: number;
}

export const Component:React.FC<ComponentProps>=({prop1='',prop2=0})=>{
return(
// logic goes here
)};

现在，当您测试这个组件时，Jest 不会抱怨，您可以轻松地测试这些值。