將propTypes和defaultProps作爲靜態道具放在React類中可以嗎？

這是我已經做了相當一段時間的方式：將propTypes和defaultProps作爲靜態道具放在React類中可以嗎？

export default class AttachmentCreator extends Component { 
    render() { 
    return <div> 
     <RaisedButton primary label="Add Attachment" /> 
    </div> 
    } 
} 

AttachmentCreator.propTypes = { 
    id: PropTypes.string, 
};

但我見過的人做這種方式：

export default class AttachmentCreator extends Component { 
    static propTypes = { 
    id: PropTypes.string, 
    }; 

    render() { 
    return <div> 
     <RaisedButton primary label="Add Attachment" /> 
    </div> 
    } 
}

事實上，我已經看到了人們也在構造函數外設置初始狀態。這是好的做法嗎？它一直在困擾着我，但我記得有人在某處說過，將默認道具設置爲靜態並不是一個好主意 - 我只是不記得原因。

來源

2016-04-21 ffxsam

你已經問過關於靜態getters的問題，但你的例子是一個靜態類屬性，你是否想知道這兩個問題？ – loganfsmyth

對不起，靜態類屬性。我將編輯 – ffxsam

es2015類當前不支持非函數屬性。其提案es2016。第二種方法相當方便，但需要插件來支持語法（theres a very common babel plugin for it）。

另一方面，一個充滿開源項目的人開始處理TypeScript接口或ActionConstants等實例，並實際創建單獨的文件夾/文件來存放各種組件的道具類型，然後將其導入到組件中。

所以總之，兩種語法都可以使用。但如果您只想嚴格使用ES2015，則說明書中尚不支持後一種語法。

來源

2016-04-21 21:06:10 PhilVarg

事實上，它在性能方面完全一樣。 React.JS是一項相對較新的技術，所以目前還不清楚哪些被認爲是好的做法，或者沒有。如果你要信任的人，看看這個Airbnb的風格指南：

https://github.com/airbnb/javascript/tree/master/react#ordering

import React, { PropTypes } from 'react'; 
 

 
const propTypes = { 
 
    id: PropTypes.number.isRequired, 
 
    url: PropTypes.string.isRequired, 
 
    text: PropTypes.string, 
 
}; 
 

 
const defaultProps = { 
 
    text: 'Hello World', 
 
}; 
 

 
class Link extends React.Component { 
 
    static methodsAreOk() { 
 
    return true; 
 
    } 
 

 
    render() { 
 
    return <a href={this.props.url} data-id={this.props.id}>{this.props.text}</a> 
 
    } 
 
} 
 

 
Link.propTypes = propTypes; 
 
Link.defaultProps = defaultProps; 
 

 
export default Link;

它們在聲明常量與propTypes對象常量，保持類很乾淨，後來它們分配到靜態屬性。我個人喜歡這種方法:)

來源

2016-04-21 19:36:09 dandel

使用實驗性功能後，我認爲我更喜歡在更穩定的提案方面犯錯。 Airbnb的造型從未誤導我。 –

對不起，但要分離propTypes聲明有什麼意義？ - 有哪些優勢？ – chenop

在我的例子中，沒有任何優勢，它只是一種自我宣揚的方式。但是，在您可能希望跨組件重用數據結構並且您不想在每個組件中重複propTypes聲明的情況下，它可能很有用:) – dandel

如果組件是無狀態的，意味着它根本不會改變它自己的狀態，您應該聲明它是一個無狀態組件（export default function MyComponent(props)）並在外面聲明propTypes。

將初始狀態聲明放入構造函數是否是一種好的做法取決於您。在我們的項目中，我們在componentWillMount()中聲明初始狀態，僅僅是因爲我們不喜歡super(props)樣板文件，您必須使用構造函數。

來源

2016-04-21 20:44:01 Foxhoundn

將propTypes和defaultProps作爲靜態道具放在React類中可以嗎？

回答

相關問題