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

回答

相關問題