Question

大家好，

我是新人，我在试图运行我的代码时失去了一天

我在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')
    );
}

但他给我这个消息：

错误：ButtonList.render（）：必须返回有效的React元素（或null）。您可能已返回undefined，数组或其他一些无效对象。

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

感谢您的帮助

Answer 1

您需要更改render()函数，使其返回单个顶级元素，其中包含子元素。基本上，每个React组件都需要有一个代表组件的顶级节点：

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

编辑：使用React 16，这个答案不再正确。您现在可以从组件的渲染功能返回一组JSX节点。

React渲染带有道具的多个按钮

1 个答案: