Reactjs：看不到呈现的常量[重复]答案

【问题标题】：Reactjs:Cant see const rendered [duplicate]Reactjs：看不到呈现的常量[重复]
【发布时间】：2018-08-25 03:37:46
【问题描述】：

我已经声明了一个 const 并且也包含在组件的渲染方法中，但在渲染的 html 中仍然找不到。

第一个组件的内容正确呈现，但我在 html 中得到空标签。

    import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import FirstComponent from './FirstComponent'

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const abc =(props)=>(
  <h1>
    Hello, {formatName(user)}!
  </h1>)
;


class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <FirstComponent val="hello"/>
        <abc/>
      </div>
    );
  }
}




export default App;

我哪里错了？

我将 abc 设置为 Abc 并且能够看到 html 上的内容。（根据 React 组件的命名约定）

但同样，我可以看到以下声明：常量元素 = ;在https://reactjs.org/docs/introducing-jsx.html。

如果它从一个大写字母开始就可以正常工作，但如果很小，那么我必须使用 ReactDom.render 显式添加它。

PS：对不起，我是一个反应新手。

【问题讨论】：

见stackoverflow.com/a/30373505/1392463
我相信 JSX 有一个约定，其中小写标签被认为是原语，因此它被转换为 React.createElement('myHeader', ...) 使用大写 JSX 标签，它被转换为 React .createElement(MyHeader, ...) 这指的是组件。

标签： javascript reactjs

【解决方案1】：

乍一看，看看你的代码，下面可能是问题所在。我们不应该忘记的重要一件事是，用户定义的组件名称应始终以大写字母开头。否则 React 会将其视为普通的 html 元素，其功能将不会按预期呈现。

将您的 const abc 更改为 const Abc 并使用 <Abc/> 而不是 <abc/> 进行渲染并检查它

【讨论】：

stackoverflow.com/questions/48838937/…