响应路由器链路属性的条件渲染

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>}