如何使用javascript函数的返回显示HTML按钮？
如何使用javascript函数的返回显示HTML按钮？
提问于 2022-05-24 18:59:42
我试图让函数返回HTML按钮标记，这些标记将显示在页面上，如下所示：
(没有悬停物)
问题是，正如您所看到的，每行都有不同的按钮，所以我想要创建一个函数，它接受参数行的“类别”，例如，"Games“行有两个按钮: Modify和Delete。
以下是我的javascript代码：
function Category(cat) {
if (cat == "games") {
let innerhtml = `<div className='game_buttons'> <button className='modify'>Modify</button> <button className='delete'>Delete</button> </div>`
return innerhtml
}
if (cat == "upcoming") {
let innerhtml = `<div className='game_buttons'> <button className='released'>Released</button> <button className='modify'>Modify</button> <button className='delete'>Delete</button> </div>`
return innerhtml
}
if (cat == "featured") {
let innerhtml = `<div className='game_buttons'> <button className='delete'>Delete</button> </div>`
return innerhtml
}
}我把这个函数放在我需要显示的地方，如下所示：
<div className='game_buttons'>
{Category("games")}
</div>但我明白了：
那么，我如何才能显示这个按钮而不只是将HTML标记作为文本呢？
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-05-24 19:36:47
有目的地做出反应，让注入HTML字符串很麻烦试图引导你走向“反应中的思考”
这里，这意味着只创建另一个组件，该组件有条件地将所需内容呈现为JSX。
function Category(props) {
if (props.cat === "games") {
return (
<div className="game_buttons">
<button className="modify">Modify</button>
<button className="delete">Delete</button>
</div>
);
}
if (props.cat === "upcoming") {
return (
<div className="game_buttons">
<button className="released">Released</button>
<button className="modify">Modify</button>
<button className="delete">Delete</button>
</div>
);
}
if (props.cat === "featured") {
return (
<div className="game_buttons">
<button className="delete">Delete</button>
</div>
);
}
}然后，呈现Category并传入您的cat道具：
<Category cat="games" />页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72368153
复制相关文章
相似问题
腾讯云开发者
