如何使用 iconElementRight 在 AppBar 中添加多个按钮答案

【问题标题】：How to add Multiple Buttons in AppBar using iconElementRight如何使用 iconElementRight 在 AppBar 中添加多个按钮
【发布时间】：2017-02-10 09:44:39
【问题描述】：

<AppBar
    title={<span>Title</span>}
    iconRightElement={
        <FlatButton key={1} label="About"/>
        <FlatButton key={2} label="Home" />
     } />
  />

我已经尝试了上面的代码，但没有工作..

【问题讨论】：

标签： reactjs material-ui appbar

【解决方案1】：

添加一个父元素

<div>
 <FlatButton key={1} label="About"/>
 <FlatButton key={2} label="Home" />
<div>

【讨论】：

【解决方案2】：

我认为的解决方案是将所有按钮/图标包装在一个元素中，然后通过属性iconRightElement 将其传递给您的AppBarcomponent。

请参阅下面的完整示例。希望这会有所帮助：

import Link from 'next/link'
import React, {PropTypes} from 'react'
import ReactDOM from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import IconButton from 'material-ui/IconButton';
import AppBar from 'material-ui/AppBar';
import NavigationClose from 'material-ui/svg-icons/navigation/close';
import ActionHome from 'material-ui/svg-icons/action/home';
import FlatButton from 'material-ui/FlatButton';
import FontIcon from 'material-ui/FontIcon';



const rightButtons = (
    <div className="appBarIcons">
        <Link href="/">
            <IconButton><ActionHome style={buttonStyle}/></IconButton>
        </Link>
        <Link href="/Login">
            <FlatButton label="Login" style={buttonStyle}/>
        </Link>
    </div>
);

const buttonStyle = {
    color: 'white'
}

class Header extends React.Component {

    render(){
        return (
            <div>
                <MuiThemeProvider>
                    <div>
                     <AppBar
                        title="AppTitle"
                        iconClassNameRight="muidocs-icon-navigation-expand-more"
                        iconElementRight={rightButtons}
                      />
                    </div>
                </MuiThemeProvider>
            </div>
        )
    }   
}

export default Header

【讨论】：