在React組件中訪問嵌套propTypes中的所有道具

我想根據disableLightbox的屬性有條件地製作LightboxImage。然而，當我從LightboxImage中讀取道具時，我只能獲得第一級屬性（src，width，height，aspectRatio）而不是級別（照片，disableLightbox）。有什麼辦法可以閱讀所有的屬性？在React組件中訪問嵌套propTypes中的所有道具

Gallery.propTypes = { 
 
    photos: React.PropTypes.arrayOf(
 
     React.PropTypes.shape({ 
 
      src: React.PropTypes.string.isRequired, 
 
      width: React.PropTypes.number.isRequired, 
 
      height: React.PropTypes.number.isRequired, 
 
      aspectRatio: React.PropTypes.number.isRequired, 
 
      lightboxImage: props => console.log(props) 
 
     }) 
 
    ).isRequired, 
 
    disableLightbox: React.PropTypes.bool 
 
};

來源

2016-04-20 neptunian

你爲什麼不只需在你的componentDidMount或構造函數中添加你的函數（你的日誌方法）？ – CapCa

@CapCa因爲我需要訪問其他道具的價值，以確定是否需要此道具。 – neptunian

@MatthewHerbst解釋的核心理念，自定義驗證，但這裏的示例代碼是更完整，更適用，更簡單的一個重寫的版本（僅供參考，未經測試雖然）：

photos: function (props, propName, componentName) { 
    // I don't know what `lightboxImage` is, I'll assume string. 
    var lightboxImageValidator = React.PropTypes.string; 
    if (!props.disableLightbox) { 
    lightboxImageValidator = lightboxImageValidator.isRequired; 
    } 

    return React.PropTypes.arrayOf(
    React.PropTypes.shape({ 
     src: React.PropTypes.string.isRequired, 
     width: React.PropTypes.number.isRequired, 
     height: React.PropTypes.number.isRequired, 
     aspectRatio: React.PropTypes.number.isRequired, 
     lightboxImage: lightboxImageValidator, 
    }) 
).isRequired.apply(this, arguments); 
}

來源

2016-04-20 19:40:12 JMM

是的，在'照片'而不是'disableLightbox'上執行時，要容易得多:) –

是的，這就是OP想要做的事，對吧？ – JMM

是的，完美。我剛剛使用'disableLightbox'，因爲OP詢問了這一點。實際上，我喜歡你們，不僅僅是因爲簡單，而是因爲它只是對照片進行一次傳球，而我必須對照片進行第二次傳球。 –

雖然無法與標準PropType驗證器，你可以通過爲任何disableLightbox或photos寫a custom validator做到這一點。讓我們把它用disableLightbox因爲這是你問什麼事：

disableLightbox: function(props, propName, componentName) { 
    // First, we need to check that we're a Boolean 
    // You could do this with PropTypes.boolean but it's much simpler to do it yourself 
    let type = typeof props[propName]; 
    if (type !== 'boolean') { 
    return new Error(propName + ' supplied to ' + componentName + ' is of type `' + type +'`. `boolean` expected. Validation failed.'); 
    } 

    if (props[propName]) { 
    if (props.hasOwnProperty('photos') { 
     // Now we do the fun part. Here we are manually checking the validation of photos 
     // using the built-in PropTypes, but this time with lightboxImage required 
     let typeChecker = PropTypes.arrayOf(PropTypes.shape({ 
     lightboxImage.string.isRequired 
     })); 

     return typeChecker(props, 'photos', componentName, 'prop'); 
    } else { 
     // Missing the photos prop 
     return new Error(propName + ' supplied to ' + componentName + ' has a true value, but prop `photos` is missing. Validation failed.'); 
    } 
    } else { 
    // disableLightbox is false, so no need to check lightboxImage 
    } 
}

我強烈建議在文檔取好讀通過自定義的驗證實例（聲明：我寫的customArrayProp例子）。上面的例子可能會被認爲有點黑客，但它應該工作。你還應該注意到，如果photos很大，那麼上面的代碼可能會對性能產生影響，因爲它基本上再次運行驗證。

來源

2016-04-20 16:28:42

在React組件中訪問嵌套propTypes中的所有道具

回答

相關問題