React具有形狀的proptype數組

122

是否有一種內置的方式來使用proptypes來確保傳遞給組件的對象數組實際上是特定形狀的對象數組？React具有形狀的proptype數組

也許這樣？

annotationRanges: PropTypes.array(PropTypes.shape({ 
    start: PropTypes.number.isRequired, 
    end: PropTypes.number.isRequired, 
})),

我是否錯過了一些超級明顯的東西？似乎這將是高度追捧。

來源

2015-09-01 majorBummer

它就在那裏......對我的鼻子：

從反應文檔本身：https://facebook.github.io/react/docs/reusable-components.html

// An array of a certain type 
    optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),

來源

2015-09-01 07:29:23 majorBummer

187

可以使用React.PropTypes.shape()作爲參數React.PropTypes.arrayOf()：

// an array of a particular shape. 
ReactComponent.propTypes = { 
    arrayWithShape: React.PropTypes.arrayOf(React.PropTypes.shape({ 
    color: React.PropTypes.string.isRequired, 
    fontSize: React.PropTypes.number.isRequired, 
    })).isRequired, 
}

請參閱文檔的Prop Validation部分。

UPDATE

截至react v15.5，使用React.PropTypes被棄用，獨立包裝prop-types應該使用：

// an array of a particular shape. 
import PropTypes from 'prop-types'; // ES6 
var PropTypes = require('prop-types'); // ES5 with npm 
ReactComponent.propTypes = { 
    arrayWithShape: PropTypes.arrayOf(PropTypes.shape({ 
    color: PropTypes.string.isRequired, 
    fontSize: PropTypes.number.isRequired, 
    })).isRequired, 
}

來源

2015-09-01 08:43:46 Pcriulan

+11

值得指出的React.PropTypes.shape'的'每個屬性使用.isRequired'的'。我到達這裏是因爲我錯誤地認爲通過在'React.PropTypes.arrayOf'上使用'.isRequired'，我不需要它。爲了實現完全覆蓋驗證，我實際上最終直接將它應用於'React.PropTypes.shape'。 – gfullam

是的，我的確和你做的事情完全一樣，但它有更強大的功能可以根據需要標記你想要的鍵。順便說一下，Explicit總是比隱含的更好。 – Pcriulan

有一個ES6速記導入，你可以參考一下。更易讀，易於輸入。

import React, { Component } from 'react'; 
import { arrayOf, shape, number } from 'prop-types'; 

class ExampleComponent extends Component { 
    static propTypes = { 
    annotationRanges: arrayOf(shape({ 
     start: number, 
     end: number, 
    })).isRequired, 
    } 

    static defaultProps = { 
    annotationRanges: [], 
    } 
}

來源

2017-10-12 02:47:44 Moewiz

請複習[我如何寫出一個好的答案]（https://stackoverflow.com/help/how-to-answer）。不接受代碼的答案是不鼓勵的，因爲他們沒有解釋他們如何解決問題中的問題。你應該更新你的答案，以解釋這個問題的作用，以及它如何改進這個問題已有的upvoted答案。 – FluffyKitten

是的，你需要在代碼中使用PropTypes.arrayOf而不是PropTypes.array，你可以做這樣的事情：

import PropTypes from 'prop-types'; 

MyComponent.propTypes = { 
    annotationRanges: PropTypes.arrayOf(
    PropTypes.shape({ 
     start: PropTypes.string.isRequired, 
     end: PropTypes.number.isRequired 
    }).isRequired 
).isRequired 
}

而且有關proptypes更多詳情，請訪問：類型檢查有了PropTypeshere

來源

2017-10-20 02:43:34 Alireza

如果我要爲多個特定形狀定義相同的proptypes，我喜歡將它抽象爲proptypes文件，以便如果對象的形狀發生變化，我只需要在一個地方更改代碼。它有助於干擾代碼庫。

例子：

// Inside my proptypes.js file 
import PT from 'prop-types'; 

export const product = { 
    id: PT.number.isRequired, 
    title: PT.string.isRequired, 
    sku: PT.string.isRequired, 
    description: PT.string.isRequired, 
}; 


// Inside my component file 
import PT from 'prop-types'; 
import { product } from './proptypes; 


List.propTypes = { 
    productList: PT.arrayOf(product) 
}

來源

2017-12-12 22:35:34

React具有形狀的proptype數組

回答

相關問題