时间戳

首页 > 解决方案 > 通过数组 ReactJS 映射时未显示下拉菜单

javascript - 通过数组 ReactJS 映射时未显示下拉菜单

问题描述

我承认标题有点模棱两可，但这是我的问题。

我正在开发一个在前端实现 ReactJS 的 Laravel 项目，我正在尝试创建一个允许用户选择项目状态的下拉菜单。我正在引用一个常量文件来获取状态及其 ID，然后通过数组映射以呈现每个项目。但是，这样做意味着菜单永远不会显示 - 但是......如果我将整个 shebang 包装在一个 div 中，它会显示。

这是我希望如何呈现项目的代码：

const StatusItems = () => {

    const statusArray = [
        constant.STATUS_PENDING_ID = constant.STATUS_PENDING,
        constant.STATUS_PROGRESS_ID = constant.STATUS_PROGRESS,
        constant.STATUS_REVIEW_ID = constant.STATUS_REVIEW,
        constant.STATUS_CLOSED_ID = constant.STATUS_CLOSED
    ];

    return (
        statusArray.map(function (status, index) {
            return (
                <DropdownButtonItem>
                    {status}
                </DropdownButtonItem>
            );
        })
    )
};

然后菜单呈现如下：

return (

    <div id="case-status-button" className={ styles['case__status-button'] }>

        <DropdownButton
            isMenuOpen={ props.isStatusMenuOpen }
            onMenuClose={ props.onStatusMenuClose }
            icon="speaker_notes">

            <StatusItems/>

        </DropdownButton>

    </div>
)

出于某种原因，当我单击菜单图标时，什么也没有出现（没有错误或警告也没有） - 但是将状态包装在一个 div 中，它可以工作：

const StatusItems = () => {

    const statusArray = [
        constant.STATUS_PENDING_ID = constant.STATUS_PENDING,
        constant.STATUS_PROGRESS_ID = constant.STATUS_PROGRESS,
        constant.STATUS_REVIEW_ID = constant.STATUS_REVIEW,
        constant.STATUS_CLOSED_ID = constant.STATUS_CLOSED
    ];

    return (
        <div>
        {statusArray.map(function (status, index) {
            return (
                <DropdownButtonItem>
                    {status}
                </DropdownButtonItem>
            );
        })}
        </div>
    )
};

这样做的问题是，它破坏了样式和语义，因为我将 a 插入<div>到元素<ul>上方。<li>

<ul>
    <div>
        <li>item 1</li>
        <li>item 2</li>
    </div>
</ul>

像那样。

任何人都可以解释为什么它只在我将 div 包裹在地图周围时才有效的原因吗？

编辑

该<DropdownButton>组件呈现：

return (
    <ul id="dropdown-list" className={ style['dropdown-menu'] }>
        { props.items }
    </ul>
)

并<DropdownButtonItem>呈现：

return (
    <li styleName="item" onClick={ this.props.onClick }>
        { this.props.children }
    </li>
)

标签： javascriptreactjs

解决方案

我通过将映射直接放在主渲染中来修复它。

<DropdownButton
    isMenuOpen={ props.isStatusMenuOpen }
    onMenuClose={ props.onStatusMenuClose }
    closeOnOutsideClick={ !props.isTourInProgress }
    icon="speaker_notes">

    {
        statusArray.map(function (status, index) {
            return (
                <DropdownButtonItem>
                    {status.label}
                </DropdownButtonItem>
            );
        })
    }

</DropdownButton>

而且我还改变了状态列表的结构，所以它是一个对象数组：

const statusArray = [
    {
        label : constant.STATUS_PENDING,
        value : constant.STATUS_PENDING_ID
    },
    {
        label : constant.STATUS_PROGRESS,
        value : constant.STATUS_PROGRESS_ID
    },
    {
        label : constant.STATUS_REVIEW,
        value : constant.STATUS_REVIEW_ID
    },
    {
        label : constant.STATUS_CLOSED,
        value : constant.STATUS_CLOSED_ID
    }
];

推荐阅读