Reactjs 如何使用三元运算符使用react和typescript返回jsx？

我想使用三元运算符返回基于条件的jsx

我想做什么？ 如果管理变量为

true then display text "hello i am admin"
false then display text "hello i am normal user"

我有下面的代码这样做

function Text({is_admin}: Props) {
    return is_admin ? (
        <span>Hello i am admin</span>) : (
            <span>Hello i am normal user </span>)
    );
}

函数文本（{is_admin}:Props）{
返回是_admin(
你好，我是管理员）：(
你好，我是普通用户）
);
}

这个代码有效。现在我想添加另一个条件

如果

is\u admin

为真且具有

count

<0，则显示文本“不可见用户”，而不显示文本“你好，我是管理员”

如果

is_admin

is

false

---

如何修改上述代码以适应这些条件。有人能帮我吗？谢谢。

您可以嵌套三元条件，但不建议这样做，因为它被认为很难阅读

我推荐这样的东西

function Text({is_admin, count}: Props) {
  if (is_admin) {
    return count < 0 ? <span>not visible user</span> : <span>Hello i am admin</span>
  }

  return <span>Hello i am normal user </span>
}

函数文本（{is_admin，count}:Props）{
如果（是管理员）{
返回计数<0？不可见用户：您好，我是管理员
}
返回你好，我是普通用户
}

您可以嵌套三元条件，但不建议这样做，因为它被认为很难读取

我推荐这样的东西

function Text({is_admin, count}: Props) {
  if (is_admin) {
    return count < 0 ? <span>not visible user</span> : <span>Hello i am admin</span>
  }

  return <span>Hello i am normal user </span>
}

函数文本（{is_admin，count}:Props）{
如果（是管理员）{
返回计数<0？不可见用户：您好，我是管理员
}
返回你好，我是普通用户
}

您可以利用早期返回来简化组件，而不是使用深度嵌套的三元操作

这将减少实现嵌套的

if..else

/三元运算符语句的需要。此外，它更具可读性

// not admin   
if (!is_admin) {
  return <span>Hello i am normal user </span>;
}

// admin, count < 0
if (count < 0) {
  return <span>not visible user</span>;
}

// admin, count > 0
if (count > 0) {
  return <span>Hello i am admin</span>;
}

//不是管理员
如果（！is_admin）{
返回你好，我是普通用户；
}
//管理员，计数<0
如果（计数<0）{
返回不可见的用户；
}
//管理员，计数>0
如果（计数>0）{
返回你好，我是管理员；
}

您可以利用早期返回来简化组件，而不是使用深度嵌套的三元操作

这将减少实现嵌套的

if..else

/三元运算符语句的需要。此外，它更具可读性

// not admin   
if (!is_admin) {
  return <span>Hello i am normal user </span>;
}

// admin, count < 0
if (count < 0) {
  return <span>not visible user</span>;
}

// admin, count > 0
if (count > 0) {
  return <span>Hello i am admin</span>;
}

//不是管理员
如果（！is_admin）{
返回你好，我是普通用户；
}
//管理员，计数<0
如果（计数<0）{
返回不可见的用户；
}
//管理员，计数>0
如果（计数>0）{
返回你好，我是管理员；
}

您可以无限链接这些三元操作

函数文本（{is_admin}:Props）{
常数计数=。。。；
返回是_admin
？计数<0
？（用户不可见）
：（你好，我是管理员）
：（你好，我是普通用户）；
}

不过，由于可读性，这是需要考虑避免的

---

希望有帮助。

您可以无限地链接这些三元操作

函数文本（{is_admin}:Props）{
常数计数=。。。；
返回是_admin
？计数<0
？（用户不可见）
：（你好，我是管理员）
：（你好，我是普通用户）；
}

不过，由于可读性，这是需要考虑避免的

---

希望有帮助。

如果

count>0

？会发生什么？如果

计数>0

？会发生什么？