通过数组 ReactJS 映射时不显示下拉菜单答案

【问题标题】：Dropdown menu not showing when mapping through array ReactJS通过数组 ReactJS 映射时不显示下拉菜单
【发布时间】：2018-11-02 18:14:03
【问题描述】：

我承认标题有点含糊，但这是我的问题。

我正在开发一个在前端实现 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>
    )
};

问题在于，它会破坏样式和语义，因为我将 <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>
)

【问题讨论】：

尝试用<React.Fragment>包装它
恐怕这也行不通
顺便说一句，我在您的代码中没有看到任何 li 或 ul ..
组件<DropdownButton> 是<ul> 和<DropdownButtonItem> 是<li>
我已经在里面添加了组件代码

标签： javascript reactjs

【解决方案1】：

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

<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
    }
];

【讨论】：