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

我收到以下错误：

元素类型无效：需要一个字符串（用于内置组件）或类/函数（对于复合组件）但得到：undefined。您可能忘记从您定义的文件中导出组件。

我确定我遗漏了一些基本的东西，但我看不到它。我在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>
  );
};

你可以使它更干嘛btw：

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

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