javascript - ReactJS 上下文 - 消费者内部的条件

Question

使用 ReactJs 上下文，我在导航栏中显示了一个计数值。我不希望在值为 0 时显示它，但是我无法弄清楚如何实现这一点。

基本上在 CounterContext.Consumer 内部我想添加一个 if 语句以仅在计数器 > 0 时显示

这是我的代码片段

<NavLink to={"/counterList"} className="nav-link" activeClassName="active">
    <span className="glyphicon glyphicon-education" /> Counter List
    <CounterContext.Consumer>
        {(c) =>
            <span className="badge badge-danger ml-10">{c.counters.filter(x => x.count > 0).length}</span>
        }
    </CounterContext.Consumer>
</NavLink>

Answer 1

您可以给箭头函数一个 body {}，将值存储在一个变量中，null如果它等于 则返回0。

例子

<NavLink to={"/counterList"} className="nav-link" activeClassName="active">
  <span className="glyphicon glyphicon-education" /> Counter List
  <CounterContext.Consumer>
    {c => {
      const count = c.counters.filter(x => x.count > 0).length;

      return count !== 0 ? (
        <span className="badge badge-danger ml-10">{count}</span>
      ) : null;
    }}
  </CounterContext.Consumer>
</NavLink>