javascript - 如何处理未接收 props 的 React 组件

Question

我有一个想要用作模板的组件，它可以传递各种值。但是，如果该值不存在，该组件将返回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(或其他内容)？或者有更好的解决方案吗？

Answer 1

从你提出问题的方式来看，<Component这不是问题，而是您正在尝试访问未定义值的属性，即object2 从未定义过，因此当您尝试对其进行属性访问时，您会收到 javascript 引用错误。没有太多背景可做，但根据您提供的内容，您可以执行以下操作:

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

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