Reactjs / SemanticUi在地图中添加条件

时间:2019-09-19 19:42:33

标签: javascript reactjs semantic-ui

我想要的是在if函数中添加map条件,但没有成功:

const CityOptions = Data.CityData.map((state, index) => ({
    key: index,
    text: state.name,
    value: state.id,
}));

render(){
return(
<Dropdown
   id="City"
   search selection
   options={CityOptions}
></Dropdown>
}
}

我尝试过:

 <Dropdown
     id="City"
     search selection
 >
     {Data.CityData.map((v,i) => {
         if(v.pid === this.state.cityValue){
             return (
                 <option key={i} value={v.id}>{v.name}</option>
             )
         }
         return true
     })}
 </Dropdown>

错误:

  

React.Children。只希望接收一个React元素的孩子。

还有:

<Dropdown
   id="City"
   search selection
   options={CityOptions.pid === this.state.cityValue ? CityOptions : null}
/>

结果:

  

没有数据

1 个答案:

答案 0 :(得分:2)

您可以先filter

Data.CityData.filter(x => x.pid === this.state.cityValue).map((v,i)  =>{
    return <option key={i} value={v.id}>{v.name}</option>
})

Semantic UI's docs optionsarray的{​​{1}},遵循模式objects,因此您需要像这样传递它

{ text: '', value: '' }