我有一个 React 组件,它正在接收从 API 响应返回的数据对象。
我正在尝试编写一个函数,该函数接受来自该数据响应的字段,检查该字段内的元素并迭代它,检查数组内的每个对象是否有特定警报的值。
如果找到特定警报的值,我需要为该警报呈现一个图标。
数据对象如下所示:
location: {
...,
details: {
summary: [
{
type: 'calling',
icon: 'phone'
},
{
type: 'power',
icon: 'electric'
},
{
type: 'water',
icon: 'water-icon'
},
]
}
}
这是我尝试有条件地渲染图标的部分(这是我的第一次尝试和初步尝试):
<div>
{location.alertDetails && (
<IconBox title={`Alerts`}>
<IconSection>
{location.details.summary.includes(type === calling) &&
<CallIcon />
}
{location.details.summary.includes(type === power) &&
<ElectricIcon />
}
{location.details.summary.includes(type === water) &&
<WaterIcon />
}
</IconSection>
</IconBox>
)}
</div>
最佳答案
您可以在组件状态中存储获取的类型数组:
const [types, setTypes] = useState(location.details.summary.map(({type}) => type))
这样,您就可以简单地有条件地渲染(或不渲染)图标:
<div>
{location.alertDetails && (
<IconBox title={`Alerts`}>
<IconSection>
{types.includes('calling') && <CallIcon />}
{types.includes('power') && <ElectricIcon />}
{types.includes('water') && <WaterIcon />}
</IconSection>
</IconBox>
)}
</div>
这是演示(所有组件都呈现为 <div>
,因为我没有这些组件):
const { render } = ReactDOM,
{ useState } = React
const apiData = {location:{details:{summary:[{type:'calling',icon:'phone'},{type:'power',icon:'electric'},{type:'water',icon:'water-icon'},]}}}
const IconTray = ({data}) => {
const [types, setTypes] = useState(data.location.details.summary.map(({type}) => type))
return (
<div>
{data.location.details && (
<div>
<div>
{types.includes('calling') && <div>I am a CallIcon</div>}
{types.includes('power') && <div>I am an ElectronIcon</div>}
{types.includes('water') && <div>I am a WaterIcon</div>}
</div>
</div>
)}
</div>
)
}
render (
<IconTray data={apiData} />,
document.getElementById('root')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>
关于javascript - 根据深度嵌套数组的项目有条件地渲染组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60309041/