时间戳

首页 > 解决方案 > React 基本示例

reactjs - React 基本示例

问题描述

嗨，我是一个新手，我已经尝试过这个例子，但遇到了一个错误，不知道是什么问题。我只是添加了一个HelloWorld的功能组件并将其添加到应用程序组件中，但它不执行。请帮忙。

应用程序.js

import './App.css';
import welcome from './components/welcome';
import { Component } from 'react';

class App extends Component
{
  render()
  {
    console.log('inside render of app');
    return(
      <div className="App">
        
        <welcome></welcome>
        
      </div>
    );
  }
}

export default App;

和

我自己的功能组件，就像我把这个文件放在组件文件夹中一样

import React from 'react'

function welcome()
{
    console.log("inside welcome.js function");
    return  <h1> Welcome Ashish </h1>

}

export default welcome

标签： reactjs

解决方案

您的组件名称应以大写字母开头。

来自反应文档

当元素类型以小写字母开头时，它指代内置组件，如 or 并导致传递给 React.createElement 的字符串 'div' 或 'span'。以大写字母开头的类型，如编译为 React.createElement(Foo) 并对应于 JavaScript 文件中定义或导入的组件。

使用Welcome而不是welcome.

最终代码

import React from 'react'

function Welcome()
{
    console.log("inside welcome.js function");
    return  <h1> Welcome Ashish </h1>

}

export default Welcome

推荐阅读