Question

我正在使用嵌套子菜单的CMS系统，这些子菜单根据用户/自定义等而有所不同。

试图解决这个问题我将一个map函数放在react组件中。根据文档，这种方法只使用一个嵌套的地图功能，但显然不是第二个，这是我需要渲染子菜单，任何想法？

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>
    )
}

Answer 1

您需要在return

中添加.map

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

Answer 2

@ AlexanderT。的回答是正确的。如果你也使用arraow函数，它会更好看

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet urna risus. Maecenas egestas pellentesque sapien blandit hendrerit. Morbi tellus felis, elementum ut ligula eu, convallis luctus ante. <a href="https://www.google.com" target="_blank">Nulla molestie mollis aliquam.</a> Maecenas
    nisl nulla, fringilla et placerat vitae, tempus ut urna.</p>
  <input type="checkbox" name="check[]" class="check">
</div>

React Nested map / forEach不起作用

2 个答案: