Click不适用于react html解析。
Click不适用于react html解析。
提问于 2022-08-17 04:36:38
Click不适用于react解析。从循环生成OnClick事件时不起作用
const genRateRows = () => {
let Data = ``;
Object.keys(getProjList).map((oneKey, i) => {
Data += `<div key={i}>
<div>${oneKey}</div>`;
Object.keys(getProjList[oneKey]).forEach((val, j) => {
let tempObj = Object.values(getProjList[oneKey][val])[0];
Data += ` <div className="projectCapsule d-flex" key=${j}>
<Col className="projectNameCapsule col-md-11">
<h5>${tempObj.talentName}</h5>
</Col>
<Col className="seeDetailsCapsule">
<button onClick={alert("ok")}>
See Details
</button>
</Col>
</div>`;
});
Data += `</div>`;
});
return parse(Data);
};回答 2
Stack Overflow用户
发布于 2022-08-17 05:03:36
假设您是指react html解析器包，即用于从常规dangerouslySetInnerHTML生成JSX元素，其唯一目的是避免dangerouslySetInnerHTML。
因为您的语法已经是JSX，所以不需要解析器
const genRateRows = () =>
Object.entries(getProjList).map(([projKey, proj]) => (
<div key={projKey}>
<div>{projKey}</div>
{Object.entries(proj).map(([key, val]) => (
<div className="projectCapsule d-flex" key={key}>
<Col className="projectNameCapsule col-md-11">
<h5>{val[0]?.talentName}</h5>
</Col>
<Col className="seeDetailsCapsule">
<button onClick={() => alert("ok")}>See Details</button>
</Col>
</div>
))}
</div>
));注意，按钮的onClick属性现在是一个函数。
Stack Overflow用户
发布于 2022-08-17 04:48:15
尝尝这个
<button ${ onClick={alert("ok")} }> Data += ` <div className="projectCapsule d-flex" key=${j}>
<Col className="projectNameCapsule col-md-11">
<h5>${tempObj.talentName}</h5>
</Col>
<Col className="seeDetailsCapsule">
<button ${ onClick={alert("ok")} }> <-- Do this
See Details
</button>
</Col>
</div>`;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73382914
复制相关文章
相似问题
腾讯云开发者
