JSX 无法访问的代码在秒 <FilterItem> 内

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}/>
            )
        });
    }

我在这里试图在三元运算符中实现的是，如果产品的第一个字母（即香蕉月亮）不等于当前的 letter，则 returned 项目将是两个 FilterItem，一个 header 包含当前字母（即 "B"）和第一个 FilterItem。否则，只有 FilterItem 被 return 编辑（即 Banana Republic，因为它与当前字母相同，不需要新的 header）。

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

但是 Webstorm 警告说第二个 FilterItem 无法访问？当我尝试运行代码时，它说两个 FilterItem?

之间存在 Unexpected token 错误

不可以return两个React组件进行三元条件运算吗？

PS。我尝试将它转换为 if-else 但它仍然给出相同的错误？这是为什么？

filterList = products.map(function(product, key) {
    if (product.charAt(0) !== letter) {
        letter = product.charAt(0);
        var count = products.filter(function(value) { return value.charAt(0) === letter}).length;

        return (
            <FilterItem type="header" header={letter} field={filter} count={count} key={key}/>
            <FilterItem type="item" field={filter} name={product} key={key}/>
        )
    } else {
        return <FilterItem type="item" field={filter} name={product} key={key}/>
    }

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}/>);
    }
})

JSX 无法访问的代码在秒 <FilterItem> 内

JSX unreachable code at second <FilterItem> within

javascript

reactjs

ternary-operator

jsx