Javascript React-打印导入组件功能的内容

试图通过将HTML分成更小的部分（位于components文件夹中）来分割一些HTML块。（我知道，HTML不是真正的HTML，而是JSX）

我试图实现的结果是让导入的组件[Navigation]呈现其内容

我知道可能有用于代码拆分的工具

问题：为什么代码不呈现div导航内容

---

Navigation.js

import React from 'react';

export default function Navigation() {
  return (
    <div className="navigation">
      <ul>
        <li>
          <a href="http://www.google.com">Google</a>
        </li>
      </ul>
    </div>
  );
}

import React from 'react';
import './App.css';
import Navigation from './components/Navigation';

class App extends React.Component {
  render() {
    Navigation();
    return (
      <div>
        Hello from component - Class!
      </div>
    );
  }
}

export default App;

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();

从“React”导入React；
导出默认函数导航（）{
返回(




);
}

App.js

import React from 'react';

export default function Navigation() {
  return (
    <div className="navigation">
      <ul>
        <li>
          <a href="http://www.google.com">Google</a>
        </li>
      </ul>
    </div>
  );
}

import React from 'react';
import './App.css';
import Navigation from './components/Navigation';

class App extends React.Component {
  render() {
    Navigation();
    return (
      <div>
        Hello from component - Class!
      </div>
    );
  }
}

export default App;

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();

从“React”导入React；
导入“/App.css”；
从“./components/Navigation”导入导航；
类应用程序扩展了React.Component{
render（）{
导航（）；
返回(
来自组件类的您好！
);
}
}
导出默认应用程序；

Index.js

import React from 'react';

export default function Navigation() {
  return (
    <div className="navigation">
      <ul>
        <li>
          <a href="http://www.google.com">Google</a>
        </li>
      </ul>
    </div>
  );
}

import React from 'react';
import './App.css';
import Navigation from './components/Navigation';

class App extends React.Component {
  render() {
    Navigation();
    return (
      <div>
        Hello from component - Class!
      </div>
    );
  }
}

export default App;

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();

从“React”导入React；
从“react dom”导入react dom；
导入“./index.css”；
从“./App”导入应用程序；
将*作为serviceWorker从“/serviceWorker”导入；
ReactDOM.render（，document.getElementById（'root'））；
serviceWorker.unregister（）；

您的组件没有呈现，因为您在return语句之外调用了de function

对于组件渲染，需要在 渲染功能

示例：

render () {
  return <Component/>
}

render（）{
返回
}

当你称之为：

render() {
  Navigation(); // see, the navigation is outside the return statemente
  return (
    <div>
      <p>Hello from component - Class!</P>
    </div>
  )
}

render（）{
Navigation（）；//请参见，导航在return语句之外
返回(
来自组件类的您好！

)
}

试试这个：

import React from 'react';
import './App.css';
import Navigation from './components/Navigation';
class App extends React.Component {
 render() {
     return (
         <div>
           <Navigation/>
           <p>Hello from component - Class!</P>
         </div>
     )
 }
}

export default App;

从“React”导入React；
导入“/App.css”；
从“./components/Navigation”导入导航；
类应用程序扩展了React.Component{
render（）{
返回(
来自组件类的您好！

)
}
}
导出默认应用程序；

您的组件没有呈现，因为您在return语句之外调用了de function

对于组件渲染，需要在 渲染功能

示例：

render () {
  return <Component/>
}

render（）{
返回
}

当你称之为：

render() {
  Navigation(); // see, the navigation is outside the return statemente
  return (
    <div>
      <p>Hello from component - Class!</P>
    </div>
  )
}

render（）{
Navigation（）；//请参见，导航在return语句之外
返回(
来自组件类的您好！

)
}

试试这个：

import React from 'react';
import './App.css';
import Navigation from './components/Navigation';
class App extends React.Component {
 render() {
     return (
         <div>
           <Navigation/>
           <p>Hello from component - Class!</P>
         </div>
     )
 }
}

export default App;

从“React”导入React；
导入“/App.css”；
从“./components/Navigation”导入导航；
类应用程序扩展了React.Component{
render（）{
返回(
来自组件类的您好！

)
}
}
导出默认应用程序；

这很有效。请你在回答中详细说明一下，你建议的改变奏效的原因是什么？更新后，我会继续接受答案。现在更新帖子，如果你还不明白，请告诉我：3这有效。请你在回答中详细说明一下，你建议的改变奏效的原因是什么？更新后，我会继续接受答案。现在更新后，如果你还不明白，请告诉我：3导航是功能组件。要呈现该组件，您必须将其作为非函数，并且它应该作为回报。导航是功能组件。要呈现组件，您必须将其作为函数而不是函数，并且它应该作为回报。