Question

我正在使用apollo客户端，做出反应，重新启动routerv4和material-ui，我的应用正在运行，在插入材料之前 - 我有

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

然后我插入了材料-ui

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

但我不清楚如何为标题和选项添加链接，在小屏幕的响应模式下我认为必须隐藏的选项，而不是小屏幕。官方的材料-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
    )
  );
}

“按钮”是来自材料的组件，来自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响应路由器v4，material-ui和apollo客户端的选项

1 个答案: