我想使用三元运算符根据某些状态条件呈现两个按钮，以避免代码重复。
我正在尝试做什么？
我有两个按钮 Cancel 和 Start 基于状态值load_cancel。如果单击取消按钮load_cancel设置为true和load_cancel设置为false开始按钮时显示。所以我在render方法中有这样的东西
{props.item_id && this.props.load_cancel &&
<button onClick=
{this.props.handle_load_start}>start</button>}
{props.item_id && !this.props.load_cancel &&
<button onClick={this.props.handle_load_cancel}>Cancel</button>}
我如何使用三元运算符做同样的事情？
谢谢。
像这样的东西
prop.item_id ? (
this.props.load_cancel ? (
<button onClick={this.props.handle_load_start}>start</button>
) : (
<button onClick={this.props.handle_load_cancel}>Cancel</button>
)
) : null
您可以检查this.props.load_cancel是否真的呈现开始按钮，否则呈现取消按钮
{props.item_id && (this.props.load_cancel? <button onClick=
{this.props.handle_load_start}>start</button> :
<button onClick={this.props.handle_load_cancel}>Cancel</button>)}
你可以这样做：
const { item_id, load_cancel } = this.props;
const button = item_id ? (
<button onClick={this.handleClick}>{load_cancel ? 'Start' : 'Cancel'}</button>
) : null;
在 handleClick 中，您可以调用this.props.handle_load_start或this.props.handle_load_cancel取决于您的props。这样你只需为按钮编写一次 jsx。