javascript - React - 打印导入组件函数的内容

Question

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

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

我确实了解可能有用于代码拆分的工具。

问题：为什么代码不渲染 div 导航内容？

---

导航.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>
  );
}

应用程序.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;

索引.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();

标签： javascriptreactjsrenderjsxcode-splitting

Answer 1

您的组件未呈现，因为您在 return 语句之外调用了 de 函数。

对于组件渲染，需要在渲染函数内部返回组件；

例子：

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;