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

【问题标题】：How to automatically add a filter depending on Boolean value in JSON file如何根据 JSON 文件中的布尔值自动添加过滤器
【发布时间】：2020-03-23 05:17:51
【问题描述】：

我有一个 JSON 文件：

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

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

-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 的帮助都会很棒。

【问题讨论】：

React Js conditionally applying class attributes的可能重复

标签： javascript css reactjs

【解决方案1】：

我认为最简单的方法是添加一些类，比如 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%);
}

【讨论】：

您好，不幸的是，这对我不起作用。它说解析错误：未终止的模板。
啊，抱歉 - 我的代码中有 2 个拼写错误 - 刚刚编辑了它。检查当前的 - 现在应该没问题

【解决方案2】：

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

【讨论】：

我把这个：tile-image ${availability && "is-active"} } src={post.img} alt=""/> 改成了这个tile-image ${!post.availability && "is-available"} } src={post. img} alt=""/> 成功了，感谢您的帮助:)
没问题很乐意提供帮助。

【解决方案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>

【讨论】：