реагирует имя класса не определено в операторе switch - PullRequest
Новая
       3

реагирует имя класса не определено в операторе switch

0 голосов
/ 12 января 2020

Я использую оператор switch для динамического рендеринга компонента. Везде, где используется атрибут className, я получаю сообщение об ошибке. Имя_класса не определено, а ингредиент всегда будет нулевым, если я удалю атрибут className, тогда он будет работать нормально 


import React from 'react';
import classes from 'C:/Users/oluad/Desktop/my-burger-appp/src/Components/BugerIngredient/BurgerIngredient.css'
import PropTypes from 'prop-types';


 const BurgerIngredient = (props) => {

    let ingredient = null;

        switch(props.type){
            case('bread-bottom'):
            ingredient = <div className="dave"></div>;
            break;
            case('Bread-top'):
            ingredient =<div className={classes.BreadTop}></div>
            break
            case('Meat'):
            ingredient=<div>NO CLASSNAME !!!  WORKS FINE</div>
            break
            case('Cheese'):
            ingredient=<div className={classes.Cheese} ></div>
            break
            case('Salad'):
            ingredient=<div className={classes.Salad} ></div>
            break
            case('Bacon'):
            ingredient= <div className={classes.Bacon}></div>
            break
            case("bread-top"):
            ingredient=<div className={classes.BreadTop}>
                            <div className={classes.Seeds1}></div>
                            <div className={classes.seeds2}></div>
                        </div>
                        break
            default:
            ingredient=null
        }


   return  ingredient
}

BurgerIngredient.PropTypes = {
         type: PropTypes.string
     };

 export default BurgerIngredient

Это файл css, который я использую BurgerIngredient. css Я использую css модулей 

.BreadBottom {
    height: 13%;
    width: 80%;
    background: linear-gradient(#F08E4A, #e27b36);
    border-radius: 0 0 30px 30px;
    box-shadow: inset -15px 0 #c15711;
    margin: 2% auto;
}

.BreadTop {
    height: 20%;
    width: 80%;
    background: linear-gradient(#bc581e, #e27b36);
    border-radius: 50% 50% 0 0;
    box-shadow: inset -15px 0 #c15711;
    margin: 2% auto;
    position: relative;
}

.Seeds1 {
    width: 10%;
    height: 15%;
    position: absolute;
    background-color: white;
    left: 30%;
    top: 50%;
    border-radius: 40%;
    transform: rotate(-20deg);
    box-shadow: inset -2px -3px #c9c9c9;
}

.Seeds1:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: white;
    left: -170%;
    top: -260%;
    border-radius: 40%;
    transform: rotate(60deg);
    box-shadow: inset -1px 2px #c9c9c9;
  }

.Seeds1:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: white;
    left: 180%;
    top: -50%;
    border-radius: 40%;
    transform: rotate(60deg);
    box-shadow: inset -1px -3px #c9c9c9;
  }

  .Seeds2 {
    width: 10%;
    height: 15%;
    position: absolute;
    background-color: white;
    left: 64%;
    top: 50%;
    border-radius: 40%;
    transform: rotate(10deg);
    box-shadow: inset -3px 0 #c9c9c9;
  }

  .Seeds2:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: white;
    left: 150%;
    top: -130%;
    border-radius: 40%;
    transform: rotate(90deg);
    box-shadow: inset 1px 3px #c9c9c9;
  }


.Meat {
    width: 80%;
    height: 8%;
    background: linear-gradient(#7f3608, #702e05);
    margin: 2% auto;
    border-radius: 15px;
}

.Cheese {
    width: 90%;
    height: 4.5%;
    margin: 2% auto;
    background: linear-gradient(#f4d004, #d6bb22);
    border-radius: 20px;
}

.Salad {
    width: 85%;
    height: 7%;
    margin: 2% auto;
    background: linear-gradient(#228c1d, #91ce50);
    border-radius: 20px;
}

.Bacon {
    width: 80%;
    height: 3%;
    background: linear-gradient(#bf3813, #c45e38);
    margin: 2% auto;
}

1 Ответ

1 голос
/ 12 января 2020

Это не то, как CSS файлы работают, они не экспортируют javascript объекты. Импортируйте файл CSS, чтобы он находился в области видимости, и задайте имена классов в соответствии с тем, что определено в вашем CSS. classNames prop - это строка имен классов, а не объектов. 

import React from 'react';
import 'C:/Users/oluad/Desktop/my-burger-appp/src/Components/BugerIngredient/BurgerIngredient.css'; // just import the CSS file so it is in scope
import PropTypes from 'prop-types';

const BurgerIngredient = (props) => {
  let ingredient = null;

  switch(props.type){
    case('bread-bottom'):
      ingredient = <div className="dave"></div>;
      break;
    case('Bread-top'):
      ingredient = <div className="BreadTop"></div>;
      break;
    case('Meat'):
      ingredient = <div>NO CLASSNAME !!!  WORKS FINE</div>;
      break;
    case('Cheese'):
      ingredient = <div className"Cheese" ></div>;
      break;
    case('Salad'):
      ingredient = <div className="Salad" ></div>;
      break;
    case('Bacon'):
      ingredient = <div className="Bacon"></div>;
      break;
    case("bread-top"):
      ingredient = (
        <div className="BreadTop">
          <div className="Seeds1"></div>
          <div className="seeds2"></div>
        </div>
      );
      break;
    default:
      ingredient = null;
  }

  return ingredient;
}

BurgerIngredient.PropTypes = {
  type: PropTypes.string
};

export default BurgerIngredient;

Если вы хотите использовать объект классов, как вы пытались, вам нужно создать файл javascript, который экспортирует объект определение пар ключ-значение, которые представляют ваши классы и используют правильный синтаксис CSS -in- Javascript. При этом используется команда prop style prop, и я не считаю (101) * псевдоселекторы (т. Е. ::before, ::after), поэтому вам нужно использовать некоторую библиотеку стилей реагирующих компонентов, например styled-components, который управляет CSS -in- Javascript лучше.

...