Javascript 如何根据JSON文件中的布尔值自动添加过滤器

我有一个JSON文件：

[
 {
 "id": 1,
 "img": "https://example.jpg",
 "availability": false
 },
 {
 "id": 2,
 "img": "https://example.jpg",
 "availability": true
 }
]

我想要实现的是，JSON with

availability:false

自动应用一个过滤器。这是我想要应用的过滤器，我想用

className=“tile image”

将其应用于img：

这是我目前的代码：

 import React, { Component } from 'react';
 import './styles.css'

 class GetOnlinePosts extends Component {
  constructor(props){
    super(props);
    this.state = {
        error : null,
        isLoaded : false,
        posts : []          
    };
}
componentDidMount(){
    fetch("https://api.myjson.com")
    .then( response => response.json())
    .then(
        (result) => {
            this.setState({
                isLoaded : true,
                posts : result
            });
        },
        (error) => {
            this.setState({
                isLoaded: true,
                error
            })
        },
    )
}
render() {
    const {error, isLoaded, posts} = this.state;
    const orderedPosts = [...posts.filter((post) => post.availability), ...posts.filter((post) => !post.availability)]
    if(error){
        return <div>Error in loading</div>
    }else if (!isLoaded) {
        return <div>Loading ...</div>
    }else{
        return(
            <div>
                <div className="tiles">
                {
                    orderedPosts.map(post => (
                        <div key={post.id}>
                         <div className="tile">
                                <img className="tile-image" src={post.img} alt=""/>
                         </div> 
                    </div>
                    ))
                }
                </div>
            </div>
        );
       }
     }
   }

export default GetOnlinePosts;

import React，{Component}来自'React'；
导入“./styles.css”
类GetOnlinePosts扩展组件{
建造师（道具）{
超级（道具）；
此.state={
错误：null，
isLoaded:false，
员额：[]
};
}
componentDidMount（）{
取回（“https://api.myjson.com")
.then（response=>response.json（））
.那么(
（结果）=>{
这是我的国家({
isLoaded：是的，
职位：结果
});
},
（错误）=>{
这是我的国家({
isLoaded：是的，
错误
})
},
)
}
render（）{
const{error，isLoaded，posts}=this.state；
const orderedPosts=[…posts.filter（（post）=>post.availability），…posts.filter（（post）=>！post.availability）]
如果（错误）{
加载时返回错误
}否则，如果（！已加载）{
返回加载。。。
}否则{
返回(
{
orderedPosts.map（post=>(
))
}
);
}
}
}
导出默认GetOnlinePosts；

---

任何关于如何使用false availability将过滤器添加到JSON上的帮助都将非常有用。

您可以执行条件呈现，其中它检查availability=false，它将添加内联样式[或者您可以添加一个类]

   <div className="tiles">
        {
            orderedPosts.map(post => (
                <div key={post.id}>
                 <div className="tile">
                        <img className="tile-image" src={post.img} 
                          style={{
                          '-webkit-filter': !post.availability ? 'grayscale(100%)' : 'none;
                          filter: !postavailability ? 'grayscale(100%)' : 'none';
                          }}
                          alt=""/>
                 </div> 
            </div>
            ))
        }
        </div>

{
orderedPosts.map（post=>(
))
}

我认为最简单的方法是添加一些类，比如说

不可用

到不可用的图像中

{orderedPosts.map(post => (
        <div key={post.id}>
            <div className="tile">
                <img className={`tile-image ${!post.availability ? "unavailable" : ""}`} src={post.img} alt=""/>
            </div> 
        </div>
    ))
}

---

你考虑过添加css类吗

   .is-available {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    }

然后在组件中执行

 <div className="tile">
  <img className={`tile-image ${availability && "is-active"} `} src={post.img} alt=""/>
 </div> 

Hello可能重复，不幸的是，这对我不起作用。它说解析错误：未终止的模板。啊，对不起-我的代码中有两个输入错误-刚刚编辑了它。检查当前的一个-现在应该可以了。我把这个改成这个，它成功了，谢谢你的帮助。没问题。乐意帮忙。

   .is-available {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    }

 <div className="tile">
  <img className={`tile-image ${availability && "is-active"} `} src={post.img} alt=""/>
 </div>