Как добавить несколько кнопок в AppBar с помощью iconElementRight

Question

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

Я попытался выше код, но не работает ..

Answer 1

Добавить один родительский элемент

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

Answer 2

Решение, на мой взгляд было бы обернуть все ваши кнопки/значки в одном отдельном элементе, а затем передайте его вашему компоненту AppBar через атрибут iconRightElement.

См. Полный пример ниже. Надеюсь, что это помогает:

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