JSX 在第二个 <FilterItem> 内无法访问代码答案

【问题标题】：JSX unreachable code at second <FilterItem> withinJSX 在第二个 <FilterItem> 内无法访问代码
【发布时间】：2017-02-03 06:32:53
【问题描述】：

所以假设我有这个 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，那么返回的项目将是两个FilterItem ，一个包含当前字母（即“B”）和第一个FilterItem 的标题。否则只返回FilterItem（即Banana Republic，因为与当前字母相同，不需要新的header）。

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

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

三元条件操作不能返回两个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}/>
    }

【问题讨论】：

"在三元条件操作中不能返回两个 React 组件吗？" --- 根本不可能返回 2 个反应组件。至于你的代码——只要让它成为一个普通的 if，它会更易读，更容易让它工作。
正如我在 PS 中所述。 @zerkms，我尝试通过普通的if-else 进行操作，但仍然出现相同的错误。
好吧，我猜你试错了。
我更新了。请检查我是否编码错误@zerkms
您不能返回 2 个组件（从表达式），您必须将它们包装在其他组件中，例如 <div>

标签： javascript reactjs ternary-operator jsx

【解决方案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}/>);
    }
})

【讨论】：

感谢您的解决方法。虽然我更喜欢三元条件，因为它在编码方面更短（而且对我来说可读）。
"为了防止需要一个包装组件" --- 你仍然需要在一些东西中包装一个组件集合
@zerkms 没错，数组不能从render 返回，但是 ReactElement 接受数组作为子元素。即<div>{filterList}</div>
是的，但请查看 OP 的代码和其他已删除的答案。在这种情况下不能消除“为了防止需要包装组件”，你必须用一些东西来包装它。如果在另一个答案中他们评论说，不知道 OP 如何检查这个答案：“filterList 必须包含连续的并且封装标题和第一个过滤器项目会破坏它”
大家好。 FilterItem 是由父 div 封装的，所以这是我看到的意外问题之一，后来才意识到。 {this.generateList()} 在父 <div> 下，所以我通过在函数末尾返回 filterList 来解决它。