呈现无状态组件时出错：“找不到变量：React”

Question

我的本机应用程序中有一个无状态组件，定义如下。

components/TodoItem.js ：

import { View, Text, Button } from 'react-native';

const TodoItem = () => (
        <View style={{flex: 1, flexDirection: 'column'}}>
            <Text>Hello, please remember to do this!</Text>
            <Button
                color="#841584"
                title="Button 1"
            />
            <Button
                color="#241584"
                title="Button 2"
            />
        </View>
);


export default TodoItem;

当我在App.js的render()函数中使用它时，如下所示：

import TodoItem from './components/TodoItem';
// . . . other code here
render() {
    return (
        <View style={styles.container}>
            <Text>Hello :)</Text>
            <TodoItem/>
        </View>
    );
}

我收到以下错误：

ReferenceError: Can't find variable: React

This error is located at:
    in TodoItem (at App.js:39)
    in RCTView (at View.js:60)
    in View (at App.js:37)
    in App (at registerRootComponent.js:35)
    in RootErrorBoundary (at registerRootComponent.js:34)
    in ExpoRootComponent (at renderApplication.js:33)
    in RCTView (at View.js:60)
    in View (at AppContainer.js:102)
    in RCTView (at View.js:60)
    in View (at AppContainer.js:122)
    in AppContainer (at renderApplication.js:32)
* components/TodoItem.js:4:8 in TodoItem
- node_modules/react-native/Libraries/Renderer/ReactNativeRenderer-dev.js:9050:17 in mountIndeterminateComponent
- node_modules/react-native/Libraries/Renderer/ReactNativeRenderer-dev.js:9573:10 in beginWork
- ... 21 more stack frames from framework internals

非常感谢您提供一些帮助！

Answer 1

您应该添加此内容- import React from 'react'; 尽管您没有在components/TodoItem.js:上使用React components/TodoItem.js:

Answer 2

即使在无状态组件中，我们也需要从react包中导入React：

import React from 'react';