是否可以動態生成下拉項？-有解無憂

我正在做出反應，對于專案的一部分，我需要 x 數量的下拉選單。每個下拉選單將有 y 數量的選項可供選擇。通常有這樣的事情，我可以只使用一個簡單的 map 函式，我很高興，但是語法有點棘手，因為一個DropdownMenu有很多Dropdown.Items. 我的代碼看起來像這樣，沒有彈出錯誤，并且 console.log 陳述句完全回傳了預期的結果，但絕對沒有任何渲染。

const renderDefaultScheduling = () => {
        return allDevices.map( (device, superIndex) => {
            <Card>
                {renderAllOfThisDevice(device, superIndex)}
            </Card>
        })
    }

    const renderAllOfThisDevice = (deviceObj, superIndex) => {
        let oneDeviceDropdowns = []
        console.log(deviceObj)
        for (let i = 1; i <= deviceObj.amount; i = i   1){
            let thisOptions = renderDropDownOptionsFromList(deviceObj, superIndex)
            oneDeviceDropdowns.push(
                <DropdownButton title={deviceObj[i]}>
                    {thisOptions}
                </DropdownButton>
            )
        }
        return(
            <Card>
                <Card.Title>{deviceObj.name}</Card.Title>
                <Card.Body>
                    {oneDeviceDropdowns}
                </Card.Body>
            </Card>
        )
    }

    const renderDropDownOptionsFromList = (deviceObj, superIndex) => {
        console.log(deviceObj)
        return deviceObj.remaining_drivers.map( (driver, index) => {
            <Dropdown.Item key={index} onClick={() => handleDriverSelection(deviceObj, driver, index, superIndex)}>
                {driver.firstname} {driver.lastname}
            </Dropdown.Item>
        })
    }

什么讓我，甚至不是<Card.Title>{deviceObj.name}</Card.Title>線渲染，它不在嵌套地圖內，只有它的第一層......所以如果deviceObj正確記錄，我認為沒有理由不渲染該線。有沒有人有任何想法，我什至可以用下拉選單做到這一點嗎？

uj5u.com熱心網友回復：

沒有資料顯示，因為您沒有從地圖函式回呼中回傳它， renderDefaultScheduling并且renderDropDownOptionsFromList

我已經用return標記了return陳述句

const renderDefaultScheduling = () => {
            return allDevices.map( (device, superIndex) => {
              ****return****  <Card>
                    {renderAllOfThisDevice(device, superIndex)}
                </Card>
            })
        }
const renderAllOfThisDevice = (deviceObj, superIndex) => {
    let oneDeviceDropdowns = []
    console.log(deviceObj)
    for (let i = 1; i <= deviceObj.amount; i = i   1){
        let thisOptions = renderDropDownOptionsFromList(deviceObj, superIndex)
        oneDeviceDropdowns.push(
            <DropdownButton title={deviceObj[i]}>
                {thisOptions}
            </DropdownButton>
        )
    }
    return(
        <Card>
            <Card.Title>{deviceObj.name}</Card.Title>
            <Card.Body>
                {oneDeviceDropdowns}
            </Card.Body>
        </Card>
    )
}

const renderDropDownOptionsFromList = (deviceObj, superIndex) => {
    console.log(deviceObj)
    return deviceObj.remaining_drivers.map( (driver, index) => {
       ****return**** <Dropdown.Item key={index} onClick={() => handleDriverSelection(deviceObj, driver, index, superIndex)}>
            {driver.firstname} {driver.lastname}
        </Dropdown.Item>
    })
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/454261.html

標籤：javascript 反应下拉式菜单

上一篇：如何從打字稿中的物件中洗掉所有鍵

下一篇：ReactNative：將變數傳遞到另一個頁面