最新消息:20210917 已从crifan.com换到crifan.org

【已解决】ReactJS中如何设置参数的是否必须和默认值

ReactJS crifan 3202浏览 0评论

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

中文:

可复用组件 | 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中如何设置参数的是否必须和默认值

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
92 queries in 0.182 seconds, using 23.39MB memory