javascript - React-打印导入组件功能的内容(React - print content of imported component function)

Question

Trying to split some HTML chunks by dividing the HTML in smaller pieces, located in the components folder.(尝试通过将HTML分成几小部分来拆分一些HTML块，这些小块位于components文件夹中。)

(I know, HTML is not really html, it is JSX).(（我知道，HTML并不是真正的html，它是JSX）。) The outcome I am trying to achieve is to have the imported component [Navigation] to render its content.(我试图实现的结果是使导入的组件[Navigation]呈现其内容。) I do understand that there might be tools for the code splitting.(我确实知道可能会有用于代码拆分的工具。) Question: Why doesnt the code render the div navigation content?(问题：代码为什么不呈现div导航内容？) Navigation.js(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(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(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();   ask by Toolbox translate from so

Answer 1

Your component is not rendering because u call de function outside the return statement.(您的组件未呈现，因为您在return语句之外调用了de function。)

For a component render, you need to return the component inside the render function;(对于组件渲染，您需要在render函数中返回该组件；) Example:(例：) render () { return <Component/> } When u call this:(当您致电：) render() { Navigation(); // see, the navigation is outside the return statemente return ( <div> <p>Hello from component - Class!</P> </div> ) } try this:(尝试这个：) 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;