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

Question

尝试通过 div将 HTML 分成更小的部分来拆分一些 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>
  );
}

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 函数。

For a component render, you need to return the component inside the render 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;

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

React - print content of imported component function

javascript

reactjs

render

jsx

code-splitting