ReactJS - 道具或propTypes？

當我閱讀有關來自開源的道具時，我看到使用props和propTypes來聲明從父級獲得的屬性。兩者有什麼區別？哪一個應該使用？ReactJS - 道具或propTypes？

例如：

export default class App extends Component { 
    props: { 
    children: Children 
    }; 

    render() { 
    return (
     <div> 
     {this.props.children} 
     </div> 
    ); 
    } 
}

propTypessource code

export default class Board extends Component { 
    static propTypes = { 
    getLists: PropTypes.func.isRequired, 
    moveCard: PropTypes.func.isRequired, 
    moveList: PropTypes.func.isRequired, 
    lists: PropTypes.array.isRequired, 
    } 
    ... 
}

來源

2017-04-07 tsuz

道具是發送到反應類的實際性能。 propTypes用於定義類應該接收的屬性。所以你應該同時使用More about props

關於proptypes的好處是它有助於確保爲每個屬性發送正確的類型，因爲你定義了它們應該是什麼......意思是你會收到一個控制檯警告，指出傳遞給組件的無效prop類型。 More about propTypes

來源

2017-04-07 05:36:17

在您鏈接的道具文檔中，它說道具是只讀的。所以，我想我不應該在我的問題的第一個例子中使用它。我可以使用'defaultProps'來代替。感謝您發佈SO文檔！不知道這樣的事情存在。 – tsuz

區別是：

道具：

用於從父組件傳遞數據/函數子組件。這將是一個Object，您從父組件發送的所有值將成爲此部分。比方說您是從父a='1' b={this.b.bind(this)} c={}經過3個值，那麼你的道具對象將是這樣的：

{ 
    ... 
    a: ..., 
    b: ..., 
    c: ..., 
    ... 
}

proptypes：

用於指定您從父組件傳遞的props類型，無論是它會是一個array, function, object, string, number etc。比方說，這些值是從父母傳給然後在子組件可以定義proptypes這樣的：

static propTypes = { 
    a: PropTypes.string, 
    b: PropTypes.func, 
    c: PropTypes.object, 
}

如何幫助在發展過程中：當您在子組件定義道具的類型，那麼每個時間它的值將被檢查，如果它接收到除指定類型以外的任何值，它將會發出警告。

還有一件重要的事情是，當一個團隊正在從事同一項任務時，這對他人也有幫助。它基本上告訴您，這些是您從父組件傳遞的值，這些值是這些值的類型，因此無需檢查父組件以獲取有關這些props的詳細信息。

來源

2017-04-07 05:37:54

好像我不應該在兒童組件中定義道具，因爲它們是不可改變的 – tsuz

沒有得到你，你能解釋更多嗎？ –

**道具是不可變的**表示您從子組件中傳遞的值，您不能在子組件中更改，您只能使用這些值。 –

道具是由父級發送給反應組件的不可變數據。請注意，它可能是函數，因爲函數是Javascript中的頭等公民。

propTypes用於驗證prop值的類型。它有助於定義道具價值的類型。

來源

2017-04-07 05:46:38 cdaiga

ReactJS - 道具或propTypes？

回答

相關問題