0
这是我的第一次互动与反应过来,代码如下:阵营的主题并不适用于儿童的组件
header.jsx
import React from 'react';
import AppBar from 'material-ui/AppBar';
import IconButton from 'material-ui/IconButton';
import IconMenu from 'material-ui/IconMenu';
import MenuItem from 'material-ui/MenuItem';
import FlatButton from 'material-ui/FlatButton';
import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert';
import NavigationClose from 'material-ui/svg-icons/navigation/close';
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {
logged: false
};
}
render() {
return (
<AppBar title="Some title"
iconElementLeft={<IconButton><NavigationClose /></IconButton>}
iconElementRight={this.state.logged ? <Logged /> : <Login />} />
);
}
}
class Login extends React.Component {
render() {
return (
<FlatButton label="Login" />
);
}
}
class Logged extends React.Component {
render() {
return (
<IconMenu iconButtonElement={<IconButton><MoreVertIcon /></IconButton>}
targetOrigin={{ horizontal: 'right', vertical: 'top' }}
anchorOrigin={{ horizontal: 'right', vertical: 'top' }}>
<MenuItem primaryText="Item1" />
<MenuItem primaryText="Item2" />
<MenuItem primaryText="Item2" />
</IconMenu>
);
}
}
export default Header;
index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
import Header from './header.jsx';
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();
class App extends React.Component {
render() {
return (
<MuiThemeProvider muiTheme={getMuiTheme(lightBaseTheme)}>
<div>
<Header />
<p> Hello React!</p>
</div>
</MuiThemeProvider>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));
的问题是,主题应用到AppBar,而不是它的组成部分,是并且,这是我的了:
不过,如果我直接在AppBar成分附加从组件的代码改变头组件,就像这样:
<AppBar title="Some title"
iconElementLeft={<IconButton><NavigationClose /></IconButton>}
iconElementRight={this.state.logged ? <Logged /> : <FlatButton label="Login" />} />
结果有所不同:
请问为了将主题传播到子组件以及它为什么会在第二种情况下工作,我错过了什么?
在此先感谢!