Question

我已经声明了一个const，并且还包含在组件的render方法中，但仍然无法在渲染的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 Component的命名约定）

但是，我再次看到以下声明： const element =;在https://reactjs.org/docs/introducing-jsx.html。

如果它从大写字母开始然后将正常工作，但如果小，那么我必须使用ReactDom.render显式添加它。

PS：很抱歉这样的导航问题，但我是新手。

Answer 1

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

将你的const abc更改为const Abc并使用<Abc/>代替<abc/>进行渲染并检查

Reactjs：看不到const渲染

1 个答案: