javascript - 基于 Prop 值(value)的有条件导出

如果将Media的backgroundColour设置为“ red”，我想将redShadowMediaStyle应用于Media。有人知道我该怎么做吗？

使用Media的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));

我认为问题在于导出默认表达式无法访问Media类中的backgroundcolour。

最佳答案

您已经很接近了，只需要一个插页式组件，就可以根据backgroundColour道具的当前值进行逻辑处理。尝试类似的东西：

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