如何根据 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 的任何帮助都会很棒。

Answer 1

你有没有关于添加css类&nbsp; &nbsp;.is-available {&nbsp; &nbsp; -webkit-filter: grayscale(100%);&nbsp; &nbsp; filter: grayscale(100%);&nbsp; &nbsp; }然后在组件中做&nbsp;<div className="tile">&nbsp; <img className={`tile-image ${availability && "is-active"} `} src={post.img} alt=""/>&nbsp;</div>&nbsp;

Answer 2

我认为最简单的方法是添加一些类，比如说unavailable不可用的图像。{orderedPosts.map(post => (&nbsp; &nbsp; &nbsp; &nbsp; <div key={post.id}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="tile">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img className={`tile-image ${!post.availability ? "unavailable" : ""}`} src={post.img} alt=""/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; ))}然后在你的 CSS 中：.unavailable {&nbsp; &nbsp; -webkit-filter: grayscale(100%);&nbsp; &nbsp; filter: grayscale(100%);}

Answer 3

您可以进行条件渲染，它会检查availability= false 它将添加内联样式[或者您可以添加一个类]&nbsp; &nbsp;<div className="tiles">&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; orderedPosts.map(post => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div key={post.id}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div className="tile">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img className="tile-image" src={post.img}&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style={{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '-webkit-filter': !post.availability ? 'grayscale(100%)' : 'none;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; filter: !postavailability ? 'grayscale(100%)' : 'none';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alt=""/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ))&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; </div>