ReactJS :在自定义组件中呈现动态子元素

Question

我已经创建了一个呈现动态内容的通用组件。其思想是呈现自定义组件中提供的任何子元素。以下代码片段：-

<DropDownMenu {...profileDropDown}>
   <div className="profile-drop-down-settings">
     profileProps.map(function(data, index) {
       <span>{data}</span>
     });
   </div>
</DropDownMenu>

下拉组件(渲染部分) :-

render() {
  const config = this.props;
  return (
    <div class="drop-down-menu">
     {this.props.children}
    </div>
  )
}

现在的问题是，我无法运行映射函数。它抛出一个错误，说明它无法访问data变量。我是新来的，我漏掉了什么吗？

Answer 1

我已经设置了一个简单的沙盒来展示您想要做的事情。

实质上：

• App呈现由App 提供的子级的Container
  • 如何构造子程序的逻辑由App控制。

​

• Container简单地将这些子元素呈现为

希望这个例子是你想要达到的目标的复制品

Answer 2

你可以试试这个，

<DropDownMenu {...profileDropDown}>
   <div className="profile-drop-down-settings">
     { profileProps.map(function(data, index) {
       return <span{data}</span>
     }); }
   </div>
</DropDownMenu>