Question

所以假设我有这个JSON数据：

{
  "product":
           [
            "Banana Moon",
            "Banana Republic",
            "Bec & Bridge",
            "Beldona",
            "Bench",
            "Caterpillar",
            "Cosmopolitan",
            "Cinderella"
           ]
}

后来，在一个组件中，我有一个函数：

generateList() {
    var letter = '';
    var products = this.props.data.product;

    filterList = products.map(function (product) {
        return (
                (product.charAt(0) !== letter) ?
                    (
                    (letter = product.charAt(0)),
                    <FilterItem type="header" header={letter} field={filter}
                                count={products.filter(function(value) { return value.charAt(0) === letter}).length}/>
                    <FilterItem type="item" field={filter} name={product}/> // HERE

                    ) :
                    <FilterItem type="item" field={filter} name={product}/>
            )
        });
    }

我在三元运算符中尝试实现的是，如果产品的第一个字母（即Banana Moon）不等于当前letter，那么返回的项目将是两个{ {1}}，一个包含当前字母（即“B”）和第一个FilterItem的标题。否则，只返回FilterItem（即Banana Republic，因为它与当前字母相同，不需要新的标题）。

正如您所看到的，我的三元运算符非常复杂。 FilterItem首先将当前新字母存储到变量(letter = product.charAt(0))，然后第二个子句返回两个letter。

但Webstorm警告第二个FilterItem无法访问？当我尝试运行代码时，它表示两个FilterItem之间存在Unexpected token错误？

是否无法在三元条件运算中返回两个React组件？

PS。我尝试将其转换为FilterItem，但它仍会出现同样的错误？那是为什么？

if-else

Answer 1

为了防止需要包装组件，请切换到forEach并推送到数组而不是使用map：

const filterList = [];
products.forEach(function(product, key) {
    if (product.charAt(0) !== letter) {
        letter = product.charAt(0);
        var count = products.filter(function(value) { return value.charAt(0) === letter}).length;
        filterList.push(<FilterItem type="header" header={letter} field={filter} count={count} key={key}/>);
        filterList.push(<FilterItem type="item" field={filter} name={product} key={key}/>);
    } else {
        filterList.push(<FilterItem type="item" field={filter} name={product} key={key}/>);
    }
})

在

1 个答案: