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

Question

我有一个 JSON 文件：

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

我想要实现的是让 JSONavailability : false自动应用过滤器。这是我要应用的过滤器，我想将其应用到 img className="tile-image"：

-webkit-filter: grayscale(100%);
filter: grayscale(100%);

到目前为止，这是我的代码：

 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;

有关如何以虚假可用性将过滤器添加到 JSON 的任何帮助都会很棒。

标签： javascriptcssreactjs

Answer 1

你有没有关于添加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>