Javascript 使用道具反应渲染多个按钮

大家好

我是react的新手，在尝试运行我的代码时已经浪费了一天时间

我在JS中有一个词汇：{key，value}

我想创建一些名称与键相等的按钮。我想我需要将我的字典（或一个键数组，因为我不需要关联的值）传递给我的reactDom.render

我已经创建了这个：

class ButtonList extends React.Component {
    onClick(event) {
        clictodraw("name");
    }

    render() {
        let items = this.props.items || []
        let rows = items.map(
            item => {return (
                <button onClick={this.onClick}>{item}</button>);}
        );

        return (
            {rows}
        );
    }
}



window.shareRenderFunc5 = function (tab) {
    ReactDOM.render(
            <ButtonList items={tab}/>,
        document.getElementById('app')
    );
}

class按钮列表扩展了React.Component{
onClick（事件）{
clictodraw（“名称”）；
}
render（）{
让items=this.props.items | |[]
让rows=items.map(
item=>{return(
{item}）；}
);
返回(
{rows}
);
}
}
window.shareRenderFunc5=函数（选项卡）{
ReactDOM.render(
,
document.getElementById（'app'）
);
}

但他给了我这个信息：

错误：ButtonList.render（）：必须返回有效的React元素（或null）。您可能返回了未定义、数组或其他无效对象

我想我的问题在于道具的数据输入。 如果你知道是什么问题，请告诉我

---

感谢您的帮助

您需要更改

render（）

函数，以便它返回一个顶级元素，其中包含子元素。基本上，每个React组件都需要有一个表示该组件的顶级节点：

return (
  <div>
    {rows}
  </div>
)

返回(
{rows}
)

---

编辑：对于React 16，此答案不再正确。现在，您可以从组件的呈现函数返回JSX节点数组。

如下编写：

return（{rows}）

用div包装行，因为行将是一个数组，我们不能返回多个子元素。另一个可能的问题是，当您

将
数组元素映射到组件时，需要为每个元素指定一个唯一的
键
属性（例如，它们在数组中的索引）是的，我在浏览器中看到了该键的警告，我会改变的。谢谢你的帮助。thanx您非常喜欢返回行
？@AhmadBamieh不，行将是一个数组，我们需要用div（单个元素）来包装它。非常感谢，我不知道。谢谢^^