如何处理没有收到 props 的 React 组件答案

【问题标题】：How to deal with React component that doesn't receive props如何处理没有收到 props 的 React 组件
【发布时间】：2025-11-26 15:00:02
【问题描述】：

我有一个想要用作模板的组件，它可以传递各种值。但是，如果该值不存在，该组件将返回 Cannot read value of undefined。

组件：

const Component = ({ value }) => (
   <div>
      <p>{!value ? '' : value}</p>
   </div>
)

然后用不同的值渲染模板……

<Component value={object1.value} />
<Component value={object2.value} /> // object2 doesn't exist, so error thrown

如果它接收的props 不存在，我如何让组件呈现null（或其他东西）？还是有更好的解决方案？

【问题讨论】：

【解决方案1】：

从您提出问题的方式来看，<Component 不是问题，而是您尝试访问未定义值 I.E 的属性。 object2 从未定义，因此当您尝试对其进行属性访问时，您会收到 javascript 引用错误。没有太多的上下文可以关闭，但是您提供的内容可以做到：

<Component value={object2 ? object2.value : null} />

理想情况下，您应该确保object1、object2 等至少被实例化为一个空对象，并且可以用这种方式将它们替换为实际值，而不是得到一个 JavaScript 引用错误，当发生属性查找

【讨论】：

没问题！我个人使用 Lodash 的 _.get 功能，如果您已经在使用 Lodash 或计划使用它，这非常棒。它只是将 object 作为第一个参数，然后将 key path 作为第二个参数_.get(object2, 'value')，如果 object2 未定义，则返回 undefined