appbar 响应选项与 react router v4，material-ui 和 apollo 客户端

Question

我正在使用 apollo 客户端、react、reac routerv4 和 material-ui，我的应用正在运行，在插入 material-ui 之前我有

<Link to="/" className="navbar">React + GraphQL Tutorial</Link>

然后我插入了material-ui

  <AppBar
    title="Title"
    iconClassNameRight="muidocs-icon-navigation-expand-more"
  />

但我不清楚如何添加标题和选项的链接，在小屏幕的响应模式下，我认为选项必须是不可见的，在小屏幕中不是。官方 material-ui 站点没有像 bootstrap 这样的例子很好地解释，所以我需要一点帮助。

完整代码为：

import React, { Component } from 'react';
import {
  BrowserRouter,
  Link,
  Route,
  Switch,
} from 'react-router-dom';

import './App.css';
import ChannelsListWithData from './components/ChannelsListWithData';
import NotFound from './components/NotFound';
import ChannelDetails from './components/ChannelDetails';
import AppBar from 'material-ui/AppBar';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

import {
  ApolloClient,
  ApolloProvider,
  createNetworkInterface,
  toIdValue,
} from 'react-apollo';


const networkInterface = createNetworkInterface({ uri: 'http://localhost:4000/graphql' });
networkInterface.use([{
  applyMiddleware(req, next) {
    setTimeout(next, 500);
  },
}]);

function dataIdFromObject (result) {
  if (result.__typename) {
    if (result.id !== undefined) {
      return `${result.__typename}:${result.id}`;
    }
  }
  return null;
}

// customResolvers:
// This custom resolver tells Apollo Client to check its cache for a Channel object with ID $channelId
// whenever we make a channel query. If it finds a channel with that ID in the cache,
// it will not make a request to the server.

const client = new ApolloClient({
  networkInterface,
    customResolvers: {
        Query: {
            channel: (_, args) => {
                return toIdValue(dataIdFromObject({ __typename: 'Channel', id: args['id'] }))
            },
        },
    },
  dataIdFromObject,
});


class App extends Component {
  render() {
    return (
      <ApolloProvider client={client}>
        <BrowserRouter>
          <MuiThemeProvider muiTheme={getMuiTheme()}>
            <div className="App">
              <Link to="/" className="navbar">React + GraphQL Tutorial</Link>
              <AppBar
                title="Title"
                iconClassNameRight="muidocs-icon-navigation-expand-more"
              />
              <Switch>
                <Route exact path="/" component={ChannelsListWithData}/>
                <Route path="/channel/:channelId" component={ChannelDetails}/>
                <Route component={ NotFound }/>
              </Switch>
            </div>
          </MuiThemeProvider>
        </BrowserRouter>
      </ApolloProvider>
    );
  }
}

export default App;

Answer 1

右边是添加这样的代码：

          <AppBar position="static">
            <Toolbar>
              <IconButton color="contrast" aria-label="Menu">

              </IconButton>
              <Typography type="title" color="inherit" >
                {"Admin"}
              </Typography>
              <AuthLink to="/customers" label="Customers"/>
              <AuthLink to="/tours" label="Tours"/>
              <AuthLink to="/signout" label="Sign Out"/>
              <AuthLink to="/signin" label=" Sign In" whenLogged="false"/>
            </Toolbar>
          </AppBar>

Authlink 只是我编写的一个组件，用于显示选项，我在其中简单地添加了标题来显示选项。

const AuthLink = (props) => {
  let auth = checkAuth();
  return (
    ( (auth && !props.whenLogged ) || (!auth && props.whenLogged == "false")  ) ? (
      <Link to={props.to} className="navbar"><Button>{props.label}</Button></Link>
    ) : (
      null
    )
  );
}

"Button" 是来自 material 的组件，"Link" 来自 react-router，这里是导入：

import {
  BrowserRouter,
  Link,
  Route,
  Switch,
  Redirect,
} from 'react-router-dom';

import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
import AppBar from 'material-ui/AppBar';
import Toolbar from 'material-ui/Toolbar';
import Typography from 'material-ui/Typography';
import Button from 'material-ui/Button';
import IconButton from 'material-ui/IconButton';

appbar 响应选项与 react router v4，material-ui 和 apollo 客户端

appbar responsive with options with react router v4, material-ui and apollo client

react-router

material-ui

apollo-client