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

你可以试试这个，

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

Answer 2

我已经设置了一个简单的sandbox来展示您尝试做的事情。

本质上：

App通过Container呈现给予孩子的App
- 如何构建子项的逻辑由App
Container只是按原样呈现这些孩子

希望这个例子是你正在努力实现的目标的复制品

ReactJS：在自定义组件中渲染动态子元素

2 个答案:

本质上：