javascript - JSX在第二个<FilterItem>中无法访问的代码

所以假设我有这个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，因为它与当前字母相同，因此不需要新的标头）。

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

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

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

最佳答案

为了避免需要包装组件，请切换到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}/>);
    }
})

关于javascript - JSX在第二个<FilterItem>中无法访问的代码，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39693954/