为什么我在 react-web 中遇到这些错误

Question

所以我正在尝试完成一个 react web 教程来学习如何制作 Android 和 iOS 应用程序，我一直在关注这个教程：https://www.youtube.com/watch?time_continue=469&v=_CBYbEGvxYY 但是当我尝试运行一个简单的页面来测试一些钩子时：

import React, { useState } from 'react';
import logo from './logo.svg';
import { TextComponent } from 'react-native';

const App = () => {
  const[count, setCount] = useState(0);
  return (
    <view>
      <text>{count}</text>
      <button title="Increment" onKeyPress={()=> setCount(count + 1)}>Increment</button>
    </view>
  );
}

export default App;

我收到以下控制台错误：

Warning: The tag <text> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
    in text (at App.tsx:9)
    in view (at App.tsx:8)
    in App
    in div (created by View)
    in View (created by AppContainer)
    in div (created by View)
    in View (created by AppContainer)
    in AppContainer

并且程序根本不会增加计数。此外，我尝试将标签名称更改为具有错误提示的大写字母，但这不起作用，因为标签无法识别。有人可以帮帮我吗？ 注意：我很困惑为什么我现在会收到这些错误，因为之前我只是有一个带有文本的简单视图，程序运行正常，但现在我收到了这些错误....

Answer 1

HTML 中没有名为<text> 的标签。在视频中，他们导入了：

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

因此，您需要确保您正在导入和使用正确的组件。它们是案例敏感性：

import React, { useState } from 'react';
import logo from './logo.svg';
import { View, Text } from 'react-native';

const App = () => {
  const[count, setCount] = useState(0);
  return (
    <View>
      <Text>{count}</Text>
      <button title="Increment" onKeyPress={()=> setCount(count + 1)}>Increment</button>
    </View>
  );
}

export default App;