React 基本示例答案

【问题标题】：React Basic ExampleReact 基本示例
【发布时间】：2021-01-17 03:57:45
【问题描述】：

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

App.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;

和

我自己的功能组件，只是补充一下我把这个文件放在 components 文件夹中

import React from 'react'

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

}

export default welcome

【问题讨论】：

函数组件要大写Welcome
不只是函数任何类型的组件以大写字母开头，例如

标签： reactjs

【解决方案1】：

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

来自react docs

当一个元素类型以小写字母开头时，它指的是一个内置组件，如 or 并导致字符串 'div' 或“跨度”传递给 React.createElement。以 a 开头的类型大写字母，如编译为 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

【讨论】：