是否可以动态生成下拉项？

Question

我正在使用 React，对于项目的一部分，我需要 x 个下拉菜单。每个下拉菜单都有 y 个选项可供选择。通常对于这样的事情，我可以只使用一个简单的映射函数并且我很高兴，但是语法变得有点棘手，因为一个 DropdownMenu 有很多 Dropdown.Items。我的代码看起来像这样，没有弹出任何错误，并且 console.log 语句 return 完全符合预期，但绝对没有渲染。

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 正确记录，我合理地没有理由不显示该行。有没有人有任何想法，我能用 DropDown Menus 做到这一点吗？

Answer 1

没有数据显示，因为您没有从 renderDefaultScheduling 和 renderDropDownOptionsFromList

中的地图函数回调中 return 获取它

我已经用 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>
    })
}

是否可以动态生成下拉项？

Is it Possible to Dynamically Generate Dropdown Items?

javascript

drop-down-menu

reactjs