如何处理不接收道具的React组件

我有一个我想用作模板的组件，它可以传递各种值。但是，如果此值不存在，组件将返回Cannot read value of undefined。如何处理不接收道具的React组件

组件：

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不存在？还是有更好的解决方案？

来源

2017-01-23 Paulos3000

你可以给它一个默认值，不是？ –

@DaveNewton在这种情况下你如何做到这一点？ – Paulos3000

http://stackoverflow.com/questions/26578167/es6-object-destructuring-default-parameters –

从你如何提出这个问题，<Component不是问题，你试图访问一个未定义的值的属性I.E. object2从来没有定义过，所以当你尝试对它进行属性访问时，你会得到一个javascript引用错误。没有太多的情况下熄灭，但你只要你能做些什么：

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

理想情况下，你将确保object1，object2等至少被实例化一个空的对象，可以用它们代替实际值的方式，而不是得到一个JavaScript引用错误，你只会有属性查找时返回undefined

来源

2017-01-23 19:23:03 finalfreq

这或多或少是我之后 - 谢谢 – Paulos3000

没问题！就我个人而言，我使用Lodash的'_.get'函数，如果您已经在使用Lodash或计划使用它，那么这个函数非常棒。它只是将对象作为第一个参数，然后将关键路径作为第二个参数'_.get（object2，'value'）'，如果object2未定义，它只返回undefined – finalfreq

如何处理不接收道具的React组件

回答

相关问题