Javascript 无法在映射函数中显示/隐藏组件

我有一个包含文本、值对的项目数组。我只需要在文本不为null且值从不为null且我正常显示时显示文本

var项目=[
{id:1，标题：“title1”，属性：{text:null，值：222}，
{id:2，标题：“title2”，属性：{text:“star”，值：123}，
{id:3，标题：“title3”，属性：{text:“sun”，值：456}，
{id:4，标题：“title4”，属性：{text:null，值：789}
];

为此，我所做的是：

类DisplayItems扩展组件{
render（）{
返回({
items.map（item=>{
返回(
showIf（！isEmpty（item.property.text））(
text:{item.property.text}
),(
值：{item.property.value}
)
)
})
})
}
}

---

但问题是，即使item.property.text为null，它也会进入showIf条件，并且如果文本中包含一些字符串，也不会呈现文本。showIf是一个内部函数，如果条件为false，它将隐藏组件。请帮助解决此问题，因为我想呈现一个属性（文本），但不管条件如何，都要显示其他属性（值）。

我认为问题在于第二个返回语句。如果仔细看，这不是有效的jsx。您应该将其更改为：

class DisplayItems extends Component {

render() {
    return (

            { 
              items.map(item => {
                   return (
                            <Text>
                                 { showIf(!isEmpty(item.property.text))? "text: " + item.property.text : "text: " + item.property.value}
                            <Text/>
                         )
              })
            }
    )
}

类DisplayItems扩展组件{
render（）{
返回(
{ 
items.map（item=>{
返回(
{showIf（！isEmpty（item.property.text））？“text:”+item.property.text:“text:”+item.property.value}
)
})
}
)
}

---

}我认为问题在于第二个返回语句。如果仔细看，这不是有效的jsx。您应该将其更改为：

class DisplayItems extends Component {

render() {
    return (

            { 
              items.map(item => {
                   return (
                            <Text>
                                 { showIf(!isEmpty(item.property.text))? "text: " + item.property.text : "text: " + item.property.value}
                            <Text/>
                         )
              })
            }
    )
}

类DisplayItems扩展组件{
render（）{
返回(
{ 
items.map（item=>{
返回(
{showIf（！isEmpty（item.property.text））？“text:”+item.property.text:“text:”+item.property.value}
)
})
}
)
}

---

}也许这可以帮你解决这个问题：

class DisplayItems extends Component {

render() {
    return (
            { 
              items.map(item => {
                    return (
                          <Text>
                              { item.property.text && `text: ${item.property.text}` }
                              value: {item.property.value}
                          <Text/>
                      )
                });
            }
        )
    }
}

类DisplayItems扩展组件{
render（）{
返回(
{ 
items.map（item=>{
返回(
{item.property.text&&`text:${item.property.text}`}
值：{item.property.value}
)
});
}
)
}
}

也许这可以帮你解决这个问题：

class DisplayItems extends Component {

render() {
    return (
            { 
              items.map(item => {
                    return (
                          <Text>
                              { item.property.text && `text: ${item.property.text}` }
                              value: {item.property.value}
                          <Text/>
                      )
                });
            }
        )
    }
}

类DisplayItems扩展组件{
render（）{
返回(
{ 
items.map（item=>{
返回(
{item.property.text&&`text:${item.property.text}`}
值：{item.property.value}
)
});
}
)
}
}

您需要

&&

运算符您需要

&&

运算符或者无论条件成功或失败都要呈现item.property.value问题是因为您在标记中混合了文本和表达式。我已经更新了解决方案。希望这将解决您的问题。我希望呈现item.property.value，而不管条件是否成功。问题是因为您在标记中混合了文本和表达式。我已经更新了解决方案。希望这能解决你的问题。