输入元件功能的反应打印内容

Question

试图分割一些HTML块，方法是将HTML分割成较小的块，位于components文件夹中。(我知道，HTML不是真正的html，而是JSX)。

我试图实现的结果是让导入的组件导航来呈现其内容。

我确实理解，可能有一些工具可以进行代码分割。

问题:为什么代码不呈现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>
  );
}

App.js

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;

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

Answer 1

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

对于组件呈现，您需要在呈现函数中返回组件；

示例：

render () {
  return <Component/>
}

当你这么说时：

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

试试这个：

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;