Question

刚开始查看reactjsx并尝试检查数组（this.state.content）是否未定义且长度为＆gt;这是渲染方法的一部分：

Counter({'count': 2, 'and': 2, 'text': 2, 'to': 2, 'I': 2, 'files': 2, 'word': 2, 'am': 2, 'the': 2, 'dictionary': 1, 'a': 1, 'not': 1, 'in': 1, 'ahead': 1, 'me': 1, 'trying': 1, 'every': 1, '.split()': 1, 'type:': 1, 'my': 1, 'punctuation': 1, 'is': 1, 'key': 1, 'error:': 1, 'help!': 1, 'those': 1, 'different': 1, 'throws': 1, 'TypeError:': 1, 'contain': 1, 'wordDict:': 1, 'appending': 1, 'if': 1, 'It': 1, 'Also,': 1, 'unhashable': 1, 'from': 1, 'because': 1, 'marks.': 1, 'pairs.': 1, 'this': 1, 'key-value': 1, 'wondering': 1, 'Thanks': 1, 'of': 1, 'good': 1, "'list'": 1, 'for': 1, 'who': 1, 'as': 1})

然而，这不起作用，如何在jsx中首先检查这个arraylength？

Answer 1

尝试：

 display = (
        <section>
               {
                this.state.content && this.state.content.map((item, i) => {
                    return <CardRenderer addPacks={true} key={i} container={item}/>
                })
            }
        </section>
    )

如果&&未定义，则this.state.content会使地图短路，如果this.state.content的长度为零，则地图将不执行任何操作（但不会出现错误）。

Answer 2

您可以使用三元运算符

display = (
        <section>
            {
               (this.state.content && this.state.content.length > 0)?
               {
                this.state.content.map((item, i) => {
                    return <CardRenderer addPacks={true} key={i} container={item}/>
                })
              } : null
            }
        </section>
    )

我如何检查reactjsx中的条件？

2 个答案: