Question

尝试通过将HTML分成几小段来拆分一些HTML块，这些小段位于components文件夹中。（我知道，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语句之外调用了函数。

对于组件渲染，您需要将组件返回到渲染功能；

示例：

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-打印导入组件功能的内容

1 个答案: