渲染无状态组件时出错:"无法找到变量:React"

时间:2018-06-07 06:30:28

标签: react-native

我的react-native应用程序中有一个无状态组件,定义如下。

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;

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

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

非常感谢对此的一些帮助!

2 个答案:

答案 0 :(得分:5)

您应该添加此内容 - import React from 'react';,但不要在components/TodoItem.js:上使用React

答案 1 :(得分:1)

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

import React from 'react';