小编Leo*_*ici的帖子

我是 React 和 Material UI 的新手，我无法弄清楚如何使用带有样式的组件作为示例。我从文档中有这个卡片组件（以带有蜥蜴的卡片为例）

https://material-ui.com/demos/cards/

我如何在我的类组件中使用它？如果我只复制渲染它可以工作，但不会得到与示例相同的结果。这是什么？

ImgMediaCard.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(ImgMediaCard);

我尝试在线搜索，但我无法弄清楚任何帮助表示赞赏

我的课

import React, { Component } from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import CardMedia from "@material-ui/core/CardMedia";
import IconButton from "@material-ui/core/IconButton";
import Typography from "@material-ui/core/Typography";
import SkipPreviousIcon from "@material-ui/icons/SkipPrevious";
import PlayArrowIcon from "@material-ui/icons/PlayArrow";
import SkipNextIcon from "@material-ui/icons/SkipNext";
import Grid from "@material-ui/core/Grid";

export default class Serie extends Component {
  constructor(props) …

我需要一些帮助来尝试弄清楚如何在 React 中使用 hls.js。让我解释一下我必须从 api 获取 m3u8 的情况，我可以通过带有标签的基本 html 使其工作，<script>但是当我尝试在 React 上实现它时，它不起作用，不胜感激。这是我到目前为止所得到的：

import React, { Component } from "react";

import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Typography from "@material-ui/core/Typography";
import Grid from "@material-ui/core/Grid";
import ButtonBase from "@material-ui/core/ButtonBase";
import CircularProgress from "@material-ui/core/CircularProgress";

import Hls from "hls.js";

const styles = theme => ({
  root: {
    flexGrow: 1,
    paddingTop: theme.spacing.unit * 2,
    paddingBottom: theme.spacing.unit * 2,
    marginBottom: 24,
    marginLeft: 24,
    marginRight: 60
  }, …

我有一个前端设置react和一个后端express and mongodb，我有一个组件需要发出获取请求，包括应该已经设置的凭据。所有路线都适用于邮递员，但我无法使用获取功能重新创建功能。快递服务器：

...
    server.use(helmet());
    server.use(compression());
    server.use(cors({
      credentials: true,
    }));

    if (process.env.NODE_ENV !== "production") {
      server.use(logger("dev"));
    }
    server.use(express.json());
    server.use(express.urlencoded({ extended: false }));

    server.use(cookieParser());

    server.use(
      session({
        secret: process.env.COOKIE_SECRET,
        resave: true,
        saveUninitialized: false,
        store: new MongoStore({ mongooseConnection: mongoose.connection })
      })
    );

    server.use(auth.initialize);
    server.use(auth.session);
    server.use(auth.setUser);

    //API ROUTES
    server.use("/user", require("./api/routes/user"));
    server.use("/pitch", require("./api/routes/pitch"));
    server.use("/match", require("./api/routes/matchmaking"));
...

用户路线：

router.post("/login", passport.authenticate("local"), (req, res, next) => {
  return res.status(200).json({
    message: "User logged in correctly",
    redirect: "/"
  });
});

router.get("/checklogin", (req, res, next) => { …

在React Navigation 3.0中，他们添加了将默认参数传递到屏幕的功能。问题是我想将这些参数传递给嵌套的stackNavigator，但我不知道该怎么做。这些是我的导航器：MainDrawer.js：

    const MyDrawerNavigator = createDrawerNavigator({
      Anime: {
        screen: SerieNavigation,
        params: { type: "anime" },
        path: "anime/:anime"
      },
      Tv: {
        screen: SerieNavigation,
        params: { type: "tv-show" },
        path: "tv/:tv"
      },
      Film: {
        screen: SerieNavigation,
        params: { type: "film" },
        path: "film/:film"
      }
    });

    const AppContainer = createAppContainer(MyDrawerNavigator);

    export default AppContainer;

SerieNavigation.js：

    const SerieStack = createStackNavigator(
      {
        Content: {
          screen: SearchScreen,
          params: { type: "anime" } //<-- HERE I WOULD LIKE TO DO SO params: { type: props.navigation.state.params.type }
        }, …

假设我有这样的界面：

export interface Promotion {
  title: string;
  image?: string;
  description?: string;
  startDate?: string;
  endDate?: string;
  type: 'discountWithImage' | 'discount' | 'countdown';
}

现在我的问题是，因为我现在确定如果键type等于'countdown'则 endDate 和 startDate 将不会未定义。有没有办法在打字稿中做到这一点？所以像这样：

export interface Promotion {
  title: string;
  image?: string;
  description?: string;
  startDate?: string;
  endDate: Promotion.type === 'countdown' ? string : undefined;
  type: 'discountWithImage' | 'discount' | 'countdown';
}

在Playground上解释的例子