在我的代码中,我有下一个:
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"
/>