反应中的双重条件渲染？

Posted 2023-02-22

【中文标题】反应中的双重条件渲染？

【英文标题】：Double conditional rendering in react?

【发布时间】：2020-11-02 12:07:15

【问题描述】：

我正在用 React 构建一个小型服装店应用程序，只是为了学习一些东西。我实现了按价格部分的过滤器，但我希望能够为所选价格范围内没有商品的情况编写条件，而不是页面为空白。

render() 
        const filteredOpt2 = this.state.items.filter(item => item.price <= 60);
        const filteredOpt3 = this.state.items.filter(item => item.price >= 60 && item.price <= 100);
        
        return (
              <div>
                    
                         this.state.selectedOption === "option1"
                         ? <ProductList products=this.state.items style=marginLeft: 0/>
                         : this.state.selectedOption === "option2"
                         ? <ProductList products=filteredOpt2 style=marginLeft: 0/>
                         : this.state.selectedOption === "option3"
                         ? <ProductList products=filteredOpt3 style=marginLeft: 0/>
                         : null
                    
              </div>
        )

我知道代码非常重复并且确实不理想，但我现在想不出更好的方法。

所以我想做的是，假设filteredOpt2导致一个空数组，我如何以及在哪里实现一个条件，如果发生这种情况，显示一个显示文本的p标签？

【参考方案1】：

您可以提前进行过滤，例如在函数中，然后相应地呈现列表：

const filterItems = (items, filter) => 
    if (filter === "option1") return items;
    if (filter === "option2") return items.filter(item => item.price <= 60);
    if (filter === "option3") return items.filter(item => item.price >= 60 && item.price <= 100);
;

render() 
    const filtered = filterItems(this.state.items, this.state.selectedOption);
        
    return (
        <div>
            filtered.length === 0 ? (
                <p>No products</p>
            ) : (
                <ProductList products=filtered style=marginLeft: 0/>
            )
        </div>
    );

或者更好的是让ProductList 组件处理：

render()         
    return (
        <div>
            <ProductList 
                products=filterItems(this.state.items, this.state.selectedOption) 
                style=marginLeft: 0
            />
        </div>
    );

const ProductList = (products) => 
    if (products.length === 0) return <p>No products</p>;

    return ...
;

【参考方案2】：

您正在通过道具将产品列表发送到ProductList 组件。在该组件中，您使用 props.products，您可以添加如下内容：

!props.products.length
  ? <p>No product matched the criteria</p> 
  : props.products.map(product => ... whatever your code is )

详细说明，如果products.length 为零，则显示“无产品”文本，否则显示产品。

【参考方案3】：

如果不深入了解组件拆分的想法，您可以像这样在模板中添加条件

const filteredOpt2 = this.state.items.filter((item) => item.price <= 60);
  const filteredOpt3 = this.state.items.filter(
    (item) => item.price >= 60 && item.price <= 100
  );

  return (
    <div>
      this.state.selectedOption === "option1" ? (
        <ProductList products=this.state.items style= marginLeft: 0  />
      ) : this.state.selectedOption === "option2" ? (
        <>
          filteredOpt2.length > 0 ? (
            <ProductList products=filteredOpt2 style= marginLeft: 0  />
          ) : (
            <p>No items lower than 60</p>
          )
        </>
      ) : this.state.selectedOption === "option3" ? (
        <>
          filteredOpt3.length > 0 ? (
            <ProductList products=filteredOpt3 style= marginLeft: 0  />
          ) : (
            <p>No items between 60 and 100</p>
          )
        </>
      ) : null
    </div>