reactjs代码中：
<dd> { this.props.noCancel ? null : <a onClick={this.handleCancel}>{cancelTitle}</a> } { this.props.noConfrim ? null : <a onClick={this.handleConfirm}>{confirmTitle}</a> } </dd> |
想要根据传入的noCancel noConfirm等参数，决定是否显示对应的按钮，
且如果没有传入该参数，则指定默认值
react js props mandatory
react js props mandatory default value
New in React v0.4: Prop Validation and Default Values – React Blog
reactjs – How to set component default props on React component – Stack Overflow
旧的写法好像是：
AddAddressComponent.defaultProps = { cityList: [], provinceList: [], }; AddAddressComponent.propTypes = { userInfo: React.PropTypes.object, cityList: PropTypes.array.isRequired, provinceList: PropTypes.array.isRequired, } |
Reactjs 的 PropTypes 使用方法 « Jame’s Blog
react js props是否必须
react js props isRequired
英文：
Typechecking With PropTypes – React
或
Typechecking With PropTypes – React
中文：
结果发现上述写法，就是最新的。
【总结】
然后用如下写法即可：
import { h, Component } from ‘preact’; import style from ‘./style.less’; import PropTypes from ‘prop-types’; export default class Notice extends Component { constructor(props) { super(props); this.handleCancel = this.handleCancel.bind(this); this.handleConfirm = this.handleConfirm.bind(this); this.modalOverlayOnClick = this.modalOverlayOnClick.bind(this); this.modalOnClick = this.modalOnClick.bind(this); this.preventEventPropagation = this.preventEventPropagation.bind(this); console.log(`Notice constructor: this.props.onCancel=${this.props.onCancel}, this.props.onConfirm=${this.props.onConfirm},this.props.noticeText=${this.props.noticeText}`); this.noticeText = this.props.noticeText; console.log(this.noticeText); } handleCancel(e) { console.log(`handleCancel: this.props.onCancel=${this.props.onCancel}`); // console.log(e); this.preventEventPropagation(e); if (this.props.onCancel) { this.props.onCancel(); } } handleConfirm(e) { console.log(`handleConfirm: this.props.onConfirm=${this.props.onConfirm}`); // console.log(e); this.preventEventPropagation(e); if (this.props.onConfirm) { this.props.onConfirm(); } } modalOverlayOnClick(e) { console.log("modalOverlayOnClick"); this.hide(e); } modalOnClick(e){ console.log("modalOnClick"); this.preventEventPropagation(e); } hide(e){ console.log("hide"); if (this.props.hide) { this.preventEventPropagation(e); this.props.hide(); } else if (this.props.onCancel) { this.props.onCancel(); } } preventEventPropagation(e){ console.log("preventEventPropagation"); e.stopPropagation(); e.nativeEvent.stopImmediatePropagation(); } // <a onClick={this.handleCancel}>{cancelTitle}</a> // <a onClick={this.handleConfirm}>{confirmTitle}</a> render () { let cancelTitle = ‘取消’; let confirmTitle = ‘确认’; return ( this.props.visible ? ( <div class={style.cd_popup_01} role="alert" onClick={this.modalOverlayOnClick}> <div class={style.cd_popup_container} onClick={this.modalOnClick}> <div class={style.fs_pup_div}> <dl> <dt> <h2>{this.noticeText}</h2> </dt> <dd> { this.props.noCancel ? null : <a onClick={this.handleCancel}>{cancelTitle}</a> } { this.props.noConfrim ? null : <a onClick={this.handleConfirm}>{confirmTitle}</a> } </dd> </dl> </div> </div> </div> ) : ( null ) ); } } Notice.PropTypes = { visible : PropTypes.bool.isRequired, onCancel : PropTypes.func, onConfirm : PropTypes.func, hide : PropTypes.func, noCancel : PropTypes.bool, noConfrim : PropTypes.bool, noticeText : PropTypes.string }; Notice.defaultProps = { visible : false, noticeText : "提示", noCancel : false, noConfrim : false }; |
转载请注明：在路上 » 【已解决】ReactJS中如何设置参数的是否必须和默认值