ios - React Native Stateless 组件说未定义

Question

我正在尝试使用 React Native 创建一个组件，如下所示:

export class IndicatorOverlay extends Component {
  render() {
    return (
      <View>
        <Text>text</Text>
      </View>
    );
  }
};

以上方法有效，但是当我尝试像这样使其无状态时......

export default ({ text = 'text' }) => {
  return (
    <View>
      <Text>{text}</Text>
    </View>
  );
};

我收到以下错误:

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.

我确定我缺少一些基本的东西，但我就是看不到它。我在 React Web 应用程序中使用了类似的无状态组件，这很好。

使用 react 16.0.0-alpha.6 和 react-native 0.43.2，我在 iPhone 模拟器中看到了这个错误。

希望有人可以提供帮助:)

Answer 1

这可能是因为第一个示例是命名导出，而第二个示例是默认示例，因此需要导入它们的方式不同。

假设您像这样导入模块:

import { IndicatorOverlay } from 'IndicatorOverlay';

你有两个选择。任何一个:

1)更改导入模块的方式(因为无状态组件现在是默认导出):

import IndicatorOverlay from 'IndicatorOverlay';

2)保持导入完整，但将您的无状态组件重构为如下所示:

export const IndicatorOverlay = ({text = 'text'}) => {
  return (
    <View>
      <Text>{text}</Text>
    </View>
  );
};

你可以让它更干燥顺便说一句:

export const IndicatorOverlay = ({ text = 'text' }) => (
  <View>
    <Text>{text}</Text>
  </View>
);

您可以在 MDN 上阅读有关导入和导出的更多信息:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export