如何使用 javascript 函數的返回來顯示 HTML 按鈕？

Question

我試圖讓我的函數返回 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

React 故意使注入 HTML 字符串變得很麻煩，以嘗試引導您“在 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 prop：

<Category cat="games" />