无法在地图功能中显示/隐藏组件

Question

我有一系列包含文本，价值对的项目。我只需要显示文本不是null的，并且值永远不会为空，并且我正常显示。

var items= [ 
  {id: 1, title: "title1", property: {text: null, value: 222}}, 
  {id: 2, title: "title2", property : {text: "star", value: 123}}, 
  {id: 3, title: "title3", property:{text: "sun", value: 456}}, 
  {id: 4, title: "title4", property: {text: null, value: 789}}
];

为此，我所做的是：

class DisplayItems extends Component {
  render() {
    return ({
      items.map(item => {
        return (
          showIf(!isEmpty(item.property.text))(
            <Text>
              text: {item.property.text}
            <Text />
          ),(
            <Text>
            value: {item.property.value}
            <Text />
          )
        )
      })
    })
  }
}

但是，即使是item.property.text为null，它也进入了showif条件，并且如果其中有一些字符串，也不会呈现文本。showif是一个内部函数，如果条件是错误的，则会隐藏组件。请帮助解决此问题，因为我想渲染一个属性（文本），但无论条件如何显示其他属性（值）。

Answer 1

我认为问题是第二个返回语句。如果仔细观察，那不是有效的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/>
                         )
              })
            }
    )
}

}

Answer 2

也许这可以为您解决：

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