無法在方法中使用 array.map 獲取要在下拉列表中呈現的標簽

Question

我似乎無法讓這個代碼片段適用於我的下拉菜單，它的目的是使用所有“kushTypes”進行下拉菜單

    import React, { Component } from 'react'
import 'bootstrap/dist/css/bootstrap.css'

class Boxes extends Component {
    state = {
        drugTypes: ["Weed", "Coke", "Meth"],
        kushTypes: ["OG Kush", "Purple haze", "Banana Kush"],
        drugs: {
            weed: "https://i.imgur.com/EG5SUSF.png",
            coke: "https://i.imgur.com/BRPbClP.jpg"
        }

    }
    render() { 
        return (
            <div>
                { this.renderWeedCard() }           
            </div>
         );
    }

    renderWeedCard() {
        return (
            <div className="card" style={{ width: '400px' }}>
                    <div className="card-body text-center">
                        <h4 className="card-title">{this.state.drugTypes[0]}</h4>
                        <p className="card-text">Denna kushen är det bästa du kan hitta i hela city, köper du detta kommer alla vilja köpa av dig, så hmu idag! :D</p>
                        <div className="dropdown">
                            <button type="button" className="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                                Vad vill du beställa
                            </button>
                            <div className="dropdown-menu">
                                {this.renderTags}
                            </div>
                        </div>
                    </div>
                </div>
        ) 
    }

    renderTags = () => {
        return this.state.kushTypes.map(kush => <a key={kush} className="dropdown-item">{kush}</a>)
    }
}
export default Boxes;

如果我之前不清楚，我想要做的是將“kushTypes”數組中的所有字符串渲染到下拉菜單中的 a 元素

Answer 1

您實際上需要調用 this.renderTags

<div className="dropdown-menu">
    {this.renderTags}
</div>  

應該

 <div className="dropdown-menu">
     {this.renderTags()}
</div>

這是一個顯示下拉值的 沙箱。 正如您所看到的，默認情況下顯示的值和按鈕什么都不做。 我相信這是由於您缺少 Popper.js 看到這些文檔。

另外，我建議您在這里查看 react-bootstrap 。 （我在上面的沙箱中啟動了一個示例）。