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

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

ReactJS Context - conditional inside consumer

javascript

reactjs

react-context