javascript - 在函数上切换背景颜色 - ReactJS

Question

当我单击一个链接时，它会根据 JSON 中的“id”呈现一个视图。当某个视图呈现时，我需要应用背景颜色。我应该切换样式。

此代码显示当我单击特定链接时的爬网。

handleCrawl = e => {
  const { id } = e.target;
  this.setState(current => ({
    showCrawl: { [id]: !current.showCrawl[id] }
  }));
};

这是我的渲染方法，Ia 在其中映射链接和 JSON 上的其他详细信息

    render() {
  return (


    <div class="d-flex" id="wrapper">

    <div class="bg-light border-right" id="sidebar-wrapper">
      <h1 class="sidebar-heading">API</h1>
      <ul class="list-group list-group-flush">


    {this.state.apis.map(api => (
        <li><a class="list-group-item list-group-item-action bg-light" key={api.id}
          id={api.id}
          onClick={this.handleCrawl}>{api.title}</a></li>
          ))}

      </ul>
    </div>

    <div id="page-content-wrapper">



      <div class="container-fluid">
      {this.state.apis.map(api => (
        <div
          key={api.id}
          id={api.id}>
          {this.state.showCrawl[api.id] && (

            <SwaggerUI url={api.opening_crawl}/>
          )}

        </div>
      ))}           
      </div>
    </div>

  </div>



  );
}

Answer 1

不确定它是否回答了你的问题。您可以有条件地切换样式。

{this.state.apis.map(api => (
    <div
      key={api.id}
      id={api.id}
      className={this.state.showCrawl[api.id]?"some-specific-style":"default-or-empty"}

    >
      {this.state.showCrawl[api.id] && (

        <SwaggerUI url={api.opening_crawl}/>
      )}

    </div>
  ))}