1

在我的代码中,我有下一个:

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} />;
};

```

但它看起来很丑,而且很奇怪。有没有办法解释这种行为?

PS 另一种解决方法(代码更少,但仍然很奇怪)是使用 IIF 而不是静态值(缓存/计算时间看起来有问题)

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

在此处输入图像描述

4

0 回答 0