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

您可以为箭头函数提供主体 {}，将值存储在变量中，如果等于 0 则返回 null >.

示例

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