javascript - 了解 JSX 中的条件语句

Question

试图理解现有reactjs代码的一些语句

<Modal.Footer>
    { getButtons.call(this)}
    { this.props.footerLinkText && getFooterLink.call(this) }
</Modal.Footer>

将如何评估？

this.props.footerLinkText && getFooterLink.call(this)

我明白这是一个条件？

还有这段代码:

function cancelBtn() {
    return (
        <Form.Btn type={ this.props.closeBtnType || 'secondary-outline' }
                  size={ this.props.closeBtnSize || 'lg' }
                  key="cancelBtn"
                  onClick={ this.props.closeBtnAction ? this.doCloseAction.bind(this) : this.close.bind(this) }
        >{ this.props.closeBtnText || 'Cancel' }</Form.Btn>
    );
}

不确定。只需要快速解释。

Answer 1

{ this.props.footerLinkText && getFooterLink.call(this) }

这是一个 Short-Circuit Evaluation .这意味着如果 this.props.footerLinkText 为真，将执行 getFooterLink。

{ this.props.closeBtnText || 'Cancel' }

如果 this.props.closeBtnText 为真，则返回 Cancel。结果会显示Cancel