React(六)Props屬性
阿新 • • 發佈:2018-09-29
傳遞數據 默認 傳遞 很多 pes validator 屬性 class spa
state 和 props 主要的區別在於 props 是不可變的,而 state 可以根據與用戶交互來改變。這就是為什麽有些容器組件需要定義 state 來更新和修改數據。 而子組件只能通過 props 來傳遞數據。
(1)使用Props屬性
class Mainextends React.Component { render() { return ( <div> <Name name={‘yulingjia‘} /> </div> ); } } class Name extends React.Component { render() {return ( <h1>{this.props.name}</h1> ); } }
(2)默認Props
class Mainextends React.Component { render() { return ( <h1>Hello, {this.props.name}</h1> ); } } Main.defaultProps = { name: ‘Yulingjia‘ };
(3)State 和 Props
class Main React.Component { constructor() { super();this.state = { name: "Yulingjia" } } render() { return ( <div> <Name name={this.state.name} /> </div> ); } } class Name extends React.Component { render() { return ( <h1>{this.props.name}</h1> ); } }
(3)Props 驗證
Props 驗證使用 propTypes,它可以保證我們的應用組件被正確使用,React.PropTypes 提供很多驗證器 (validator) 來驗證傳入數據是否有效。
當向 props 傳入無效數據時,JavaScript 控制臺會拋出警告。
var name= "Yulingjia"; class Name extends React.Component { render() { return ( <h1>Hello, {this.props.name}</h1> ); } } Name.propTypes = { name: PropTypes.string }; ReactDOM.render( <Name name={name} />, document.getElementById(‘example‘) );
React(六)Props屬性