代码之家 › 专栏 › 技术社区 › Deus Ex

进口React组件未显示

reactjs node.js javascript

Deus Ex · 技术社区 · 2 年前

我导入了一个react组件,但它没有显示在页面上。

这是我的app.js文件。我导入了“functionalComponent”组件,但它没有显示在浏览器上。

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

function App() {
  return (
    <div className="App">
     
      <functionalComponent/>
    </div>
  );
}

export default App;

这是我的函数Component.js

import React from "react";

class functionalComponent extends React.Component{

    render(){
        return <p>This is a functional component.</p>
    }
}

export default functionalComponent;

这是我的App.test.js

import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

2 回复 | 直到 2 年前

koushik deb 2 年前

React要求组件的第一个字母大写 将组件名称更改为FunctionalComponent,并检查这是否解决了问题。

import React from "react";
const FunctionalComponent = () => {   
    return <p>Functional component</p>   
}

export default FunctionalComponent;

谢谢

Ahmed Sbai 2 年前

import React from "react";

const FunctionalComponent = () => {  
  // render() method does not exist we are no longer in a Class context
  return <p>This is a functional component.</p>   
}

export default FunctionalComponent ;

这就是函数组件的外观,就像您的 App 组件,在您的示例中,您正在使用一个类

Ashish Sharma 2 年前

组件名称应为FunctionalComponent,而不是FunctionalComponent。JavaScript区分大小写,因此不正确的大小写会阻止识别组件。

import FunctionalComponent from './functionalComponent';

 function App() {
  return (
  <div className="App">
  <FunctionalComponent />
 </div>
  );
 }

export default App;

在functionalComponent.js中: 从“React”导入React;

 class FunctionalComponent extends React.Component {
  render() {
 return <p>This is a functional component.</p>;
  }
 }

export default FunctionalComponent;

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

4 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

4 月前

Alex · 在轻量级中同时解构和不解构变量

4 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

4 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

4 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

4 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

4 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

4 月前

user3472810 · Angular@Output/EventEmitter返回undefined

4 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

4 月前