javascript - 基于 props 值的条件导出

Question

如果 Media 的背景颜色为“红色”，我想将 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 类中的背景颜色。

标签： javascriptreactjs

Answer 1

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

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