React正在渲染[Object object]而不是数组中的JSX元素

Question

我的React应用程序中有这个按钮数组:

const buttons = [    
<Button label='Close' onClick={props.handleClose} />,
<Button label='Save' onClick={props.handleSubmit} />,
<Button label='Reset' onClick={props.handleReset} />
]

但是当我渲染它们时:

render() {
    return (
        <div className='buttons'>{buttons.join()}</div>
    )
}

我明白了:

 Object object Object object Object object

我希望得到这些元素.

Answer 1

没有必要使用.join().只需传递一个这样的数组就足够了:

render() {
    return (
        <div className='buttons'>{buttons}</div>
    )
}