多个元素的条件渲染

如果当前用户是创建我目前所在组的用户，我希望渲染 3 个附加按钮，所以我尝试了如下操作：

render(){
        let adminButtons;
        if (this.state.groupData && this.props.user.id){
            if(this.state.groupData.owner === this.props.user.id){
                adminButtons = {
                    <CustomButton>Add Quiz</CustomButton>
                    <CustomButton>Drafts</CustomButton>
                    <CustomButton>Delete Group</CustomButton> };
            }
            else{
                adminButtons = <div/>;
            }
            }
        }
    return(
        <div className='group-page'>
            <div className='group-controls'>

                <div className='admin-buttons'>
                    {adminButtons}
                </div>   
            </div>

        </div>
    )}

但是这个实现会引发编译器错误，我如何更改代码才能使其工作？ JSX 表达式必须有一个父元素，这是我收到的错误

简而言之，您可以将组件包装在React.Fragment https://reactjs.org/docs/fragments.html.

 <>
  <CustomButton>Add Quiz</CustomButton>
  <CustomButton>Drafts</CustomButton>
  <CustomButton>Delete Group</CustomButton>
</>

根据文档：

React 中的一个常见模式是组件返回多个元素。片段允许您对子级列表进行分组，而无需向 DOM 添加额外的节点。