切换函数的背景颜色 - 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>
))}