Question

嗨，我是 React 的新手，我已经尝试过这个例子，但出现错误，不知道是什么问题。我只是简单地添加了一个HelloWorld的功能组件并添加到app组件中，但它不执行。请帮忙。

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

Answer 1

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

来自react docs

<块引用>

当元素类型以小写字母开头时，它指的是内置组件如 or 并导致字符串“div” 或 'span' 传递给 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

反应基本示例

1 个答案: