通過自定義檢查擴展反應道具類型驗證

Question

我正在嘗試對我的組件中的數組prop進行propTypes驗證。 我的propTypes驗證看起來像這樣

Foo.propTypes = {
 columns: PropTypes.arrayOf(
    PropTypes.shape({
      identifier: PropTypes.string,
      displayName: PropTypes.string,
      type: PropTypes.string,
      align: PropTypes.oneOf(['right', 'left', 'center']),
      sort: PropTypes.bool
    })
  )
}

現在，我想通過自定義驗證來擴展此驗證，方法是驗證sort數組的列數組中只有一個值應為true

我有一個選項是為整個列數組編寫自定義驗證，它將執行PropTypes.arrayOf和PropTypes.shape驗證，然后進行sort驗證並拋出error或null

但我不想做返工，並希望利用內置的React.PropTypes進行所有驗證，然后添加我的自定義驗證

Answer 1

prop-types用於運行時類型檢查，您嘗試完成的內容屬於該領域之外，更像是數據驗證。 即使有可能，我也不建議使用道具類型。

我特別會警告這一點，因為道具類型只會在發展中發出警告。 如果你的數據無效，我想你會想要更多的結果，比如從一列以外的所有列中取消排序，或者向用戶顯示一些內容。

Answer 2

您也可以在自定義驗證器中使用PropTypes包。 所以用以下代碼解決了我的問題

Foo.propTypes = {
 columns: function(propValue, key, componentName, location, propFullName) {
    PropTypes.arrayOf(
      PropTypes.shape({
        identifier: PropTypes.string,
        displayName: PropTypes.string,
        type: PropTypes.string,
        align: PropTypes.oneOf(['right', 'left', 'center']),
        sort: PropTypes.bool
      })
    );
    if (propValue.columns.filter(i => i.sort === true).length > 1) {
      return new Error(
        `Invalid prop ${propFullName} supplied to ${componentName}. Only single object can have sort value as true`
      );
    }
    return null;
  }
}