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

您可以为arrow函数赋予主体{}，将值存储在变量中，如果等于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>

ReactJS上下文-有条件的内部使用者

1 个答案: