Question

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

我正在研究一个在前端实现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>
)

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

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

1 个答案: