我有一个包含文本、值对的项目数组。仅当文本不为空且value从不为空且正常显示时,我才需要显示文本。
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为空时,它也会进入showIf条件,并且如果文本中包含某些字符串,则不会呈现文本。showIf是一个内部函数,如果条件为假,它会隐藏组件。请帮助解决这个问题,因为我想渲染一个属性(文本),但显示其他属性(值),而不考虑条件。
发布于 2019-02-21 02:27:58
我认为问题出在第二个返回语句上。如果仔细观察,就会发现这不是有效的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/>
)
})
}
)
}
}
发布于 2019-02-21 02:50:16
也许这可以帮你解决这个问题:
class DisplayItems extends Component {
render() {
return (
{
items.map(item => {
return (
<Text>
{ item.property.text && `text: ${item.property.text}` }
value: {item.property.value}
<Text/>
)
});
}
)
}
}
https://stackoverflow.com/questions/54792922
复制相似问题