Question

render()
    {
        // const mystyle="display:none;";
        return(
                    <li className="active" ><Link to={this.props.hyperlink }> {this.props.title} </Link>
                        <ul className="dropdown">
                            {  
                                this.props.data.map((menuItem)=>(
                                        <li  key={menuItem.id} ><Link to={"/products/" + menuItem.id }> {menuItem.name} </Link>
                                            <ul className ="dropdown" key={menuItem.id}>
                                            {
                                                this.state.subCats.map((subMenuItem)=>(
                                                    <li  key={subMenuItem.id} ><Link to={"/products/"}>{subMenuItem.name}</Link></li>
                                                ))
                                            }
                                            </ul>
                                        </li>
                                ))       
                            } 
                        </ul>
                    </li>       
        );      
    }

我想使用react和bootstrap类创建嵌套的下拉菜单，但是用于bootstrap类下拉列表的jquery无法在地图循环内的悬停上工作。

代码呈现，并在chrome jsx中完美转换为html。但在悬停时不会改变样式，就像从显示不会改变一样：从无到显示方块

如果我输入的代码没有地图循环，它将完美运行

预期结果：嵌套下拉菜单实际结果：嵌套下拉列表不起作用

Answer 1

您还需要导入bootstrap.bundle.min.js。

使用以下语句：import 'bootstrap/dist/js/bootstrap.bundle.min'

Bootstrap在嵌套映射循环内无法正常工作

1 个答案: