无法在另一个内部有条件地要求组件

Question

我正在尝试require()（并渲染）取决于道具返回的值的两个组件之一（lang）。所以，如果props.lang是spanish，它应该导入并渲染一个名为<Spain />的组件，否则，<UnitedStates />：

/* eslint-disable no-unused-vars */

import Button from '@material-ui/core/Button';
import withStyles from '@material-ui/core/styles/withStyles';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';

import IconButton from '@material-ui/core/IconButton';

const styles = (theme) => ({
  root: {
    padding: 0,
  },
});

const FlagButton = (props) => {
  const {
    lang, classes, ip
  } = props;

  let Flag;

  if(lang === 'spanish') {
    Flag = require('./svg-icons/flags/Spain');
  } else {
    Flag = require('./svg-icons/flags/UnitedStates');
  }

  return (
    <IconButton disableFocusRipple disableRipple className={classes.root}><Flag /></IconButton>
  );
};

FlagButton.propTypes = {
  classes: PropTypes.shape({
    root: PropTypes.string,
  }).isRequired,
};

const mapStateToProps = (state) => ({
  ip: state.ip,
});

export default connect(
  mapStateToProps,
  null,
)(withStyles(styles)(FlagButton));

但是，这会引发以下invariant violation 错误：

元素类型无效：应为字符串（用于内置组件）或类/函数（用于复合组件）但得到：对象。

什么是完成我想要做的事情的正确方法？

附加信息：我require()-ing 的文件是有效的 React 组件，具有以下结构（为简洁起见）：

import SvgIcon from '@material-ui/core/SvgIcon';

export default function() {
  return (
    <SvgIcon
      xmlns="http://www.w3.org/2000/svg"
      x="0"
      y="0"
      enableBackground="new 0 0 512.001 512.001"
      version="1.1"
      viewBox="0 0 512.001 512.001"
      xmlSpace="preserve"
    >
      <path
        fill="#F5F5F5"
        d="M503.172 423.725H8.828A8.829 8.829 0 010 414.897V97.104a8.829 8.829 0 018.828-8.828h494.345a8.829 8.829 0 018.828 8.828v317.793a8.83 8.83 0 01-8.829 8.828z"
      />
    </SvgIcon>
  );
}

注意：我确实不想要导入所有组件然后有条件地渲染它们。我想仅导入我需要渲染的内容。

Answer 1

您遇到的问题可能是由“import”和“require”之间的差异引起的。

如果您的flags/XXX 组件使用export default ...，并且您想使用require 导入，那么您必须显式声明default 符号。

长话短说，试试吧：

const SpanishFlag = require('./svg-icons/flags/Spain').default;
const USFlag = require('./svg-icons/flags/UnitedStates').default;

甚至更简单：

import SpahishFlag from './svg-icons/flags/Spain'

如果您的意图是仅加载您需要的标志，则不是这样。您可能想查看code splitting :-)

Answer 2

你为什么不干脆做，例如：

const SpanishFlag = require('./svg-icons/flags/Spain');
const USFlag = require('./svg-icons/flags/UnitedStates');

然后，在 IconButton 中使用三元运算符：

<IconButton disableFocusRipple disableRipple className={classes.root}>{ lang === 'spanish' ? SpanishFlag : USFlag}</IconButton>