react嵌套地图/forEach 不起作用

IT技术 javascript reactjs ecmascript-6
2021-05-15 04:26:56

我正在开发一个带有嵌套子菜单的 CMS 系统,这些子菜单因用户/自定义等而异。

为了解决这个问题,我在 react 组件中放置了一个 map 函数。根据文档,这种方法仅适用于一个嵌套的地图功能,但显然不是第二个,这是我渲染子菜单所需要的,有什么想法吗?

render() {
    return (
        <div className="ui dropdown item">
            {this.state.text}
            <i className="dropdown icon"></i>
            <div className="menu">
                {multipleOptions.split(',').map(function(option, i){
                    option.split('@').map(function(subOption, i){
                        return <a className="item" key={i + "random"}>{subOption}</a>;
                    })
                })}
            </div>
        </div>
    )
}
2个回答

你需要先在return里面添加.map

{multipleOptions.split(',').map(function(option, i) {
   return option.split('@').map(function(subOption, i) {
     return <a className="item" key={i + "random"}>{ subOption }</a>;
   })
})}

@AlexanderT. 的回答是正确的。如果您也使用 arraow 函数,它会读起来更好一些

{multipleOptions.split(',').map((option, i)=>
   option.split('@').map((subOption, i)=>
     <a className="item" key={i + "random"}>{subOption}</a>))}