Question

我写了一个函数。我只使用简单的字母作为该函数的名称。我没有得到任何输出和错误。我突出显示了此功能。

Lesson3.js

import React from 'react'

    function formattedDate(props){
    return(
    <div>This is {props.date.toLocaleTimeString()}</div>
    );
}

class Clock extends React. Component{

    constructor(props){
        super(props);
        this.state = {date:new Date()}
    }

    componentDidMount(){
        this.timerID = setInterval(() => this.tick(),1000)
    }

    componentWillUnmount(){
        clearInterval(this.timerID)
    }

    tick(){
        this.setState({
           date : new Date()
        })

    }

    render(){
        return(
            <div><h1><formattedDate date={this.state.date}/></h1></div>
        );

    }

}

export default Clock

所以我检查了我的整个代码。但是我没有发现任何错误。将函数名称更改为大写名称后，得到输出。请说明原因。

import React from 'react'

function FormattedDate(props){
    return(
    <div>This is {props.date.toLocaleTimeString()}</div>
    );
}

class Clock extends React.Component{

    constructor(props){
        super(props);
        this.state = {date:new Date()}
    }

    componentDidMount(){
        this.timerID = setInterval(() => this.tick(),1000)
    }

    componentWillUnmount(){
        clearInterval(this.timerID)
    }

    tick(){
        this.setState({
           date : new Date()
        })

    }

    render(){
        return(
            <div><h1><FormattedDate date={this.state.date}/></h1></div>
        );

    }

}

export default Clock

我将Lesson3.js导入了App.js。除了上面提到的错误外，我的代码中没有错误。

App.js

import React from 'react';
import './App.css';
import Clock from './Components/lesson3'

function App() {
  return (
    <div className="App">

        <p>
          <Clock/>
        </p>

    </div>
  );
}

export default App;

Answer 1

在这里，您尝试将FormattedDate用作component。不是普通功能。

所有React组件名称必须以大写字母开头。如果您以小写字母开头的组件名称，它将被视为内置元素，例如<div>或<span>。这是因为JSX的工作方式。

您可以找到更多信息here

Answer 2

为组件使用大写的变量/函数名称，以将其与常规/助手/等函数区分开来是一种命名约定。

function Button() { return <button>Test</button> }

function sortNumbers(array) { return ... }

Answer 3

React将以小写字母开头的组件视为DOM标签。例如，<div />代表HTML div标签，所以在：

<formattedDate .../> React被视为DOM标签，显然不是。

另一方面，<UpperCase />代表一个组件，并要求其在其范围之内

因此，<FormattedDate />代表一个组件，并要求FormattedDate在范围内。

如果您想了解有关组件的更多信息，可以阅读更多at React Offical docs for component and props

为什么js函数的名称应以大写字母开头

3 个答案: