我如何在React中选择导入/导出

Question

当用户在Chrome中打开Page时，我想使用WebP，否则应为png。

我发现此代码：

var isChrome = !!window.chrome && !!window.chrome.webstore

但是我不能在出口或进口周围写一个If语句

到目前为止，这是我的代码：

import redditwebp from '../img/icons/reddit.webp';
import redditpng from '../img/icons/reddit.png';

var isChrome = !!window.chrome && !!window.chrome.webstore;

if(isChrome){
  export default {redditwebp}
}
else{
  export default {redditpng}
}

Answer 1

如果您应该使用内联语句，则您实际上不应该正常运行

const isChrome = !!window.chrome && !!window.chrome.webstore;

然后在您的实际代码中内联

<div>{isChome ? <img src={redditwebp} alt="" /> : <img src={redditpng} alt="" />}</div>

对我来说，这是最好的方法，您可能必须编写this.isChrome即时消息，不确定是否愿意。

我会说得更清楚。

import redditwebp from '../img/icons/reddit.webp';
import redditpng from '../img/icons/reddit.png';
import React, { Component } from 'react';

const isChrome = !!window.chrome && !!window.chrome.webstore;

export default class logo extends Component {
render(){
    return (
        <div>{isChome ? <img src={redditwebp} alt="" /> : <img src={redditpng} alt="" />}</div>
    }
}