Question

我有几个导入到app.js文件中的组件。但是在将两个组件添加到我的app.js之后，我无法再添加其他组件。但是，在导入部分中，我的组件通过我提供的名称进行链接，但无法在我的代码中使用它们。

我还尝试了将工作组件代码复制到新组件并更改其类名。另外，我编写了一个简单的组件并尝试将其导入，但是仍然没有运气。

//App.js file***************
import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import AppNavbar from './components/AppNavbar';
import Players from './components/Players';
// components are linked here********
import test from './components/test';
import playerModal from './components/playerModal';
//***********************************
import { Provider } from 'react-redux';
import Store from './Store';
import { Container } from 'reactstrap';
function App() {
    return (
        <Provider store={Store}>
            <div className="App">
                <AppNavbar />
                <Container>
                    <Players />
                                  //but not able to use it here***
                    <test />
                    <playerModal />
                                  //**********************
                </Container>
            </div>
        </Provider>
        );
    }

export default App;
///*******************************
///test.js file*****************
import React, { Component } from 'react';
class test extends Component {
    render() {
        return <div>asdfjokd</div>;
    }
}
export default test;
//*****************************************

请帮我解决这个问题。

Answer 1

制作组件时，需要大写。您需要将test更改为Test，还需要将playerModal更改为PlayerModal

在JSX中，小写标签名称被认为是HTML标签。但是，带有点（属性访问器）的小写标记名称不是。

    <component /> compiles to React.createElement('component') (html tag)
    <Component /> compiles to React.createElement(Component)
    <obj.component /> compiles to React.createElement(obj.component)

示例：

import React, { Component } from 'react';
class Test extends Component {
    render() {
        return <div>asdfjokd</div>;
    }
}
export default Test;

还要确保将其大写导入

Answer 2

自定义组件遵循命名约定，因此 test 组件应为 Test 并分别应用于其他组件。

请尝试更新组件名称，其中自定义组件的首字母应为大写字母

无法将React组件导入我的app.js

2 个答案: