我有使用地圖呈現它的資料串列 - 我需要在該串列中的一個專案中添加一個事件。
const UserModal = (props) => {
const {user,setUser} = props ;
const list = [,{id:3,text:'??? ??? ??',icon:<BsChat />},{id:5,text:'????',icon:<BiExit />},];
/this is my list for making navigation bar
return (
<div className={style.main}>
<div style={{bordeBottom:'1px solid black'}}>
<BiUser />
<p>{user.username}</p>
</div>
{ //this is where I render a list to show and make component
list.map((item)=>
<div key={item.id}>
{item.icon}
<p>{item.text}</p>
</div>)
}
</div>
);
};
export default UserModal;
這是我的代碼，例如我需要在該串列中具有 id=5 的特定物件上添加一個事件。我怎樣才能做到這一點
uj5u.com熱心網友回復：
const UserModal = (props) => {
const {user,setUser} = props ;
const myEvent = () => alert('event fired');
const list = [,{id:3,text:'??? ??? ??',icon:<BsChat /> , event : myEvent},{id:5,text:'????',icon:<BiExit />},];
/this is my list for making navigation bar
return (
<div className={style.main}>
<div style={{bordeBottom:'1px solid black'}}>
<BiUser />
<p>{user.username}</p>
</div>
{ //this is where I render a list to show and make component
list.map((item)=>
<div key={item.id}>
{item.icon}
<p onClick={item.event}>{item.text}</p>
</div>)
}
</div>
);
};
export default UserModal;
uj5u.com熱心網友回復：
list.map((item, i)=> (
item.id == 5 ?
<div onClick={handleClick} key={i}></div>
:
<div key={i}></div>
)
uj5u.com熱心網友回復：
我不知道是否有某種內置解決方案，但這里有一個簡單的解決方法：
- 為了簡單起見，我改變了一些東西
- 重要的部分是 if 陳述句，它檢查專案 ID 是否為 5，如果是，則添加一個帶有所需事件的 div
function App() {
const list = [
,
{ id: 3, text: "comonent 3" },
{ id: 5, text: "comonent 5 (target)" }
];
return (
<>
<h1>Hello world<h1/>
{list.map((item) => (
<div key={item.id} style={{ backgroundColor: "red" }}>
<p>{item.text}</p>
{item.id == 5 ? (
<div
onClick={() => {
alert("This component has a event");
}}
>
{" "}
event
</div>
) : (
<></>
)}
</div>
))}
</>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/466513.html
上一篇：反應原生：文本組件內的三元條件