react 组件中使用组件_如何在组件中合并React JS组件？

react 组件中使用组件

JSX will help us fulfill this purpose. If you are completely new in React JS, I suggest reviewing some recent articles that will be of help too.

JSX将帮助我们实现这一目的。 如果您是React JS的新手，我建议您回顾一些最近的文章，这些文章也将有所帮助。

Just like many developers always say, React JS is all about components. You should have a basic knowledge of React JS components.

就像许多开发人员经常说的那样，React JS与组件有关。 您应该具有React JS组件的基础知识。

When learning React JS for the first time, people always put all their components into one file. But as your React JS app becomes more and more complex, there is a need to create components as different JavaScript files which helps our code look simpler to understand.

第一次学习React JS时，人们总是将所有组件都放在一个文件中。 但是随着您的React JS应用变得越来越复杂，有必要将组件创建为不同JavaScript文件，这有助于使我们的代码更易于理解。

We are going to create a short biography un-styled web page with 3 components.

我们将创建一个由3个组成部分的简短的无样式传记网页。

Open the index file in the "./src" folder of your pre-configured generated react js app project.

在您预先配置的生成的react js应用程序项目的“ ./src”文件夹中打开索引文件。

Let it look like this,

让它看起来像这样，

import React from "react"
import ReactDOM from "react-dom"
import App from "./App"

ReactDOM.render ( <App />  , document.getElementById('root'))

As you can see above, the code renders the App component in the root node.

如您在上面看到的，代码在根节点中呈现App组件。

We are now going to create the App component in the App.js file.

现在，我们将在App.js文件中创建App组件。

We will then create our 3 components in 3 separate files and finally render them in the App.js.

然后，我们将在3个单独的文件中创建3个组件，最后在App.js中渲染它们。

In the "./src" folder, create the following JavaScript files.

在“ ./src”文件夹中，创建以下JavaScript文件。

Info.js:

Info.js：

import React from "react"
class Info extends React.Component {
  render (){
    return (

           <h1> hey </h1>
      )    
  }
}

export default Info

Academics.js:

Academics.js：

import React from "react" class Academics extends React.Component { 
render () { 
return (
<div>
    <table border="1">
        <tr>
            <th>SCHOOL </th>
            <th>YEAR </th>
            <th>DEGREE </th>
        </tr>
        <tr>
            <td> Havard University </td>
            <td> 2015 </td>
            <td> MASTERS </td>
        </tr>
        <tr>
            <td> University of Buea </td>
            <td> 2019</td>
            <td> PHD </td>

        </tr>
    </table>
</div>
) 
} 
} 
export default Academics

Conclusion.js:

结论.js：

import React from "react"

class Conclusion extends React.Component {
	render (){
		return (
			<p> My Concusion </p>
			)
	}
}

export default Conclusion

Finally, it's time to add our App.js file and add all the above components into the App component.

最后，是时候添加我们的App.js文件并将以上所有组件添加到App组件中了。

import React from "react" 
import Info from "./Info" 
import Academics from "./Academics" 
import Conclusion from "./Conclusion" 
class App extends React.Component { 
render (){ 
return (
<div>
    <center>

        <Info />
        <Academics />
        <Conclusion />

    </center>
</div>
) 
} 
} 
export default App

To add or merge components from different files, we first of all import those components into the main component using the syntax,

要添加或合并来自不同文件的组件，我们首先使用以下语法将这些组件导入主组件：

    Import classname from "./fileurl "

The class name is equally the component's name.

类名同样是组件的名称。

Lastly, use the syntax < ... /> with the component names as seen above to add the components.

最后，对上面的组件名称使用语法<... />添加组件。

Run your app using the command npm start on a command line terminal and open localhost:3000 on your browser.

在命令行终端上使用命令npm start运行应用 程序，然后在浏览器上打开localhost：3000 。

Thanks for coding with me! See you @ the next article. Feel free to drop a comment or question.

感谢您与我编码！ 下次见。 随意发表评论或问题。

翻译自: https://www.includehelp.com/react-js/how-to-merge-react-js-components-in-a-component.aspx

react 组件中使用组件