Question

我正在尝试为导航栏创建一个React组件。

我想将此组件从一个单独的文件导入到App.js中。当前，该组件应该只返回一个简单的“ Hello world”段落，但是我很难使它起作用。

我已将以下代码写入位于src / components / navbar.js的文件中：

import React from 'react';

export default class navBar extends React.Component {
    render() {
        return (
            <p>Hello world.</p>
        )
    }
}

现在我想从src / App.js导入此组件，如下所示：

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

import navBar from './components/navbar.js'

class App extends Component {
    render() {
        return (
            <navBar/>
        );
    }
}

export default App;

如果我编译并打开该站点，则什么也没有，这使我感到困惑。

非常感谢您的帮助！

编辑：有人建议，问题在于<App />没有在任何地方呈现。我认为情况并非如此，因为默认情况下还会创建另一个文件（index.js），如下所示：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.unregister();

我还尝试将段落（和整个导航栏）直接放入src / App.js。

编译后，我可以在浏览器中看到预期的结果，因此问题应该出在导出/导入上。

Answer 1

在JSX中，小写标记被认为是简单的HTML / SVG元素。仅当使用访问器时才可以使用小写字母（因此带有bla.blabla之类的点）。

例如，您可以阅读有关here的信息。

因此，您必须将类名navBar更改为NavBar，然后在render方法中将其更改：

render() {
        return (
            <NavBar/>
        );
    }

Answer 2

这是一个完整的工作示例： **注意：NavBar.js应该以大写字母开头。

App.js

std::vector<int> v = {5,2,9,3,8}

auto it = std::remove_if(v.begin(),v.end(), 
    std::bind(std::bind(std::equal_to<int>(),_1,0),
    std::bind(std::modulus<int>(),_1,2)));

NavBar.js

import React from "react";
import ReactDOM from "react-dom";
import NavBar from "./components/NavBar";

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

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

导出/导入React组件的问题

2 个答案: