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

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

2 个答案: