如何根据 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类

   .is-available {

    -webkit-filter: grayscale(100%);

    filter: grayscale(100%);

    }

然后在组件中做

 <div className="tile">

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

 </div> 

Answer 2

我认为最简单的方法是添加一些类，比如说unavailable不可用的图像。

{orderedPosts.map(post => (

        <div key={post.id}>

            <div className="tile">

                <img className={`tile-image ${!post.availability ? "unavailable" : ""}`} src={post.img} alt=""/>

            </div> 

        </div>

    ))

}

然后在你的 CSS 中：

.unavailable {

    -webkit-filter: grayscale(100%);

    filter: grayscale(100%);

}

Answer 3

您可以进行条件渲染，它会检查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>