Условный экспорт на основе значения реквизита

#javascript #reactjs

Вопрос:

Я хотел бы применить redShadowMediaStyle к носителю, если носителю присвоен фоновый цвет «red». Кто-нибудь знает, как я могу это сделать, пожалуйста?

Компонент React, использующий медиа:

 <Media
  backgroundColour={"red"}
/>

Медиа-компонент:

  import mediaStyle from "assets/jss/material-kit-pro-react/components/mediaStyle.jsx";
 import redShadowMediaStyle from "assets/jss/material-kit-pro-react/components/suited/redShadowMediaStyle.jsx";

class Media extends React.Component {
  render() {
    const {
      backgroundColour
    } = this.props;
    return (
      <div>
        {/* content */}
      </div>
    );
  }
}

export default ((props.backgroundColour === "red")
  ? withStyles(redShadowMediaStyle)(Media)
  : withStyles(mediaStyle)(Media));

Я думаю, проблема в том, что backgroundcolour внутри класса Media недоступен для выражения экспорта по умолчанию.

1. На момент экспорта еще нет экземпляра Media , поэтому реквизитов нет. Это похоже на проблему X / Y . Что заставляет вас думать, что вы должны сделать экспорт условным для props?

2. Просто компонент, который вызывает это и предоставляет props, — это тот, который будет знать, должен ли это быть стиль ‘red’ или нет.

Ответ №1:

Вы довольно близки к этому, вам просто нужно иметь промежуточный компонент, чтобы вы могли выполнять логику на основе текущего значения реквизита backgroundColour. Попробуйте что-то вроде:

 export default function MediaWrapper({ backgroundColour }) {
    if (backgroundColour === "red") {
        return withStyles(redShadowMediaStyle)(Media)
    }
    return withStyles(mediaStyle)(Media));
}

Ответ №2:

В итоге я сделал следующее: 1) создал css-класс ‘red’ в MediaStyle (вместо того, что у меня было изначально, который представлял собой отдельный CSS-файл redShadowMediaStyle) 2) Отредактировал Медиа, чтобы иметь: if (props.backgroundColour == «красный») return else return