react-router Link 属性的条件渲染

Question

我试图在我的 React 项目中禁用 Link 的某些属性。按钮显示在多个页面上，因此我需要它们有条件地呈现。

这是取消按钮和退款按钮的示例，其中 disableCancelButton 和 disableRefundButton 是布尔值，它们会考虑各种因素来确定按钮是否应该显示。我的尝试：

<Link {{disableRefundButton} && to={"/rentals/" + rentalId + "/refund"}}>Refund</Link>

<Link {{disableCancelButton} && onClick={this.props.onCancel}}>Cancel</Link>

我也试过：

<Link {{disableRefundButton} ? to={"/rentals/" + rentalId + "/refund"}}>Refund</Link>

我确定我在某个地方用花括号离开了。感谢所有帮助。

Answer 1

你不想有条件地渲染整个组件，而不仅仅是道具吗？

{!disableRefundButton &&
  <Link to={"/rentals/" + rentalId + "/refund"}}>Refund</Link>}

{!disableCancelButton &&
  <Link onClick={this.props.onCancel}}>Cancel</Link>}