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>
    )
}

Answer 2

为什么需要使用join。没有必要。

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}</div>
    )
}

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

2 个答案: