如何使用 javascript 函数中的 return 显示 HTML 按钮？

Question

我试图让我的函数 return HTML 按钮标签显示在页面上，如下所示：

（没有悬停的东西）

问题是，如您所见，每一行都有不同的按钮，所以我想创建一个函数，将参数作为行的“类别”，例如“游戏”行有 2 个按钮：修改和删除。

这是我的 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 标签作为文本呢？

Answer 1

有目的地做出反应 injecting HTML strings cumbersome to try and steer you towards "thinking in React."

在这里，这意味着只创建另一个组件，有条件地将您想要的内容呈现为 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" />

如何使用 javascript 函数中的 return 显示 HTML 按钮？

How can I display an HTML button using the return from a javascript function?

html

javascript

reactjs