react 入坑筆記(三)
阿新 • • 發佈:2018-11-14
React Props
props - 引數。
元件類 React.Component 有個 defaultProps 屬性,以 class xxx extend React.Component 形式建立的元件夠可以通過屬性來控制傳入元件的引數,如下例:
// 建立 HelloMessage 元件 class HelloMessage extends React.Component { render() { return ( <h1>Hello, {this.props.name}</h1> ); } } // 通過 元件.defaultProps 來設定傳入元件的 props HelloMessage.defaultProps = { name: 'Runoob' }; const element = <HelloMessage/>; ReactDOM.render( element, document.getElementById('example') );
配合 state 使用案例:
class WebSite extends React.Component { constructor() { super(); this.state = { name: "菜鳥教程", site: "https://www.runoob.com" } } render() { return ( <div> <Name name={this.state.name} /> <Link site={this.state.site} /> </div> ); } } class Name extends React.Component { render() { return ( <h1>{this.props.name}</h1> ); } } class Link extends React.Component { render() { return ( <a href={this.props.site}> {this.props.site} </a> ); } } ReactDOM.render( <WebSite />, document.getElementById('example') );
props 驗證
vue 中我們傳遞引數的時候可以進行引數驗證,react中我們同樣可以進行。
(佔坑,還沒有研究完驗證怎麼寫)