Question

我想使用react根据条件渲染jsx。

如果condition1和condition2应该显示添加按钮。如果condition1和！condition2应该显示按钮，请单击我

下面是我的代码，

render = () => {
    return (
        {condition1 && condition2 && (
            <button>add</button>
        )}
        {condition1 && !condition2 && (
            <button>click me </button>
        )}
    );
}

我如何使用三元运算符重写以上代码。有人可以帮我解决这个问题。谢谢。

Answer 1

condition1 && condition2 ? <button>add</button> : <button>click me </button>;

Answer 2

您可以这样写-

{condition1 ? 
  (condition2 ? 
    (<button>add</button>) : (<button>click me </button>) 
  ) : null}

注意-有时ES Linter会警告在JSX渲染方法中使用嵌套三元运算符。因此，请记住这一点。

No Nested Ternary

Answer 3

return ((condition1 && condition2)?(<button>add</button>):((condition1 && !condition2)?(<button>click me </button>):()));

如何使用三元运算符使用React渲染jsx？

3 个答案: