故事书/反应以某种奇怪的方式加载组件（看起来像异步的）

Question

在我的代码中，我要下一个：

import { TammIcon } from 'src/components/atoms';
// ....
      <Row>
        <Col xs={16}>
          <Row type="flex" justify="end">
            <Col xs={12}>
              <TammIcon
                type={icon}
                disabled={faded}
                className="uil-dash-card__icon"
              />
            </Col>
          </Row>
        </Col>
        {!!completed && (
          <Col xs={8}>
            <Row type="flex" justify="end">
              <Col>
                <TammIcon
                  type="ok"
                  active
                  className="uil-dash-card__completed"
                />
              </Col>
            </Row>
          </Col>
        )}
      </Row>

TammIcon的第二次使用给了我

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
    at invariant (http://localhost:6006/static/preview.bundle.js:11638:15)
    at getFiberTagFromObjectType (http://localhost:6006/static/preview.bundle.js:57065:9)
    at createFiberFromElement (http://localhost:6006/static/preview.bundle.js:57025:20)
    at reconcileSingleElement (http://localhost:6006/static/preview.bundle.js:59893:23)
    at reconcileChildFibers (http://localhost:6006/static/preview.bundle.js:59949:35)
    at reconcileChildrenAtExpirationTime (http://localhost:6006/static/preview.bundle.js:60320:28)
    at reconcileChildren (http://localhost:6006/static/preview.bundle.js:60311:3)

调试之后，我发现TammIcon组件未正确导入，并使用

解决方法

```

import { TammIcon as TI } from 'src/components/atoms';


console.log('TI', TI); // undefined
const TammIcon = props => {
  console.log('TI', TI); // component
  return <TI {...props} />;
};

```

但是它看起来很丑，而且很奇怪。有什么办法可以解释这种行为？

P.S。另一个解决方法（代码更少，但仍然很奇怪）是使用IIF而不是静态值（看起来在缓存/计算时间上有问题）

            <TammIcon
              // type='ok'
              type={(() => 'ok')()}
              active
              className="uil-dash-card__completed"
            />