Question

我对react.js非常陌生。当我在练习项目中工作时，遇到了这个奇怪的错误。外部js文件中的某些组件在导入时会呈现，而某些组件则不会。

app.js：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Hello from './components/hello'
import functionalClick from './components/fuctionalClick'

class App extends Component {
  render() {
    return (
      <div className="App">

        <Hello name='Lol   '></Hello>

        <functionalClick></functionalClick>
      </div>
    );
  }
}

export default App;

functionalClick.js：

import React from 'react'

function fuctionalClick() {
    return (
        <div>
            <button>Click</button>
        </div>
    )
}

export default fuctionalClick

hello.js：

import React from 'react';
const Hello = (props) => {
    return (
        <div>
            <h1>
                Hello {props.name}!
            </h1>
        </div>
    );
}

export default Hello;

functionalClick.js不会呈现，但是第一种方法会呈现（hello.js）。即使我遵循的语法也几乎相同。enter image description here

Answer 1

根据文档 User-Defined Components Must Be Capitalized

当您尝试不使用小写的HTML标记时，React还会显示一些警告。

警告：正在使用大写HTML。始终在React中使用小写HTML标记。

警告：此浏览器无法识别该标签。如果要渲染React组件，请以大写字母开头。

在此处查看警告：https://codesandbox.io/s/react-example-exw9h

Answer 2

在您的问题中，输入错误出现错误，但有时还是不起作用，请稍后再检查组件名称。如果很小，那就资本化。

Answer 3

我认为您在函数fuctionalClick的声明中可能有错字。似乎您在n之后缺少了c。您的组件可能被导入为undefined。检查您的浏览器控制台以获取其他信息。

尝试更改此内容：

import functionalClick from './components/fuctionalClick'

这：

<functionalClick></functionalClick>

对此：

import fuctionalClick from './components/fuctionalClick'

这：

<fuctionalClick></fuctionalClick>

看看是否有帮助。

外部React组件未在App.js中呈现

3 个答案: