如何处理不接收道具的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

如果收到的null不存在，如何让组件呈现props，（或其他）？或者有更好的解决方案吗？

Answer 1

从您提出问题的方式来看，<Component不是问题，而是您尝试访问未定义值的属性I.E. object2从未被定义，所以当你尝试对它进行属性访问时，你会得到一个javascript引用错误。没有太多的背景可以用，但是你提供的内容可以做到：

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

理想情况下，您会确保object1，object2等至少被实例化为空对象，并且可以用实际值替换它们而不是获取javascript引用错误发生属性查找时返回undefined