Question

我有一组包含文本和值对的项目。仅当文本不为null且value永远不为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

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

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

2 个答案: