如何在一个组件中嵌入两个组件？

在 ReactJS 组件中，很容易构建任何应用程序的复杂 UI。我们可以将应用程序的 UI 划分为小组件，并在网页上单独渲染每个组件。

React 允许我们在另一个组件中渲染一个组件。这意味着，我们可以在 2 个或更多组件之间创建父子关系。

先决条件：该项目的先决条件是：

• 反应知识
• 类组件

创建应用程序：以下命令将帮助您启动一个新的反应应用程序。

npx create-react-app testapp

接下来，您必须从终端移动到testapp项目文件夹。

cd testapp

在src文件夹中创建一个新的components文件夹，并在其中创建两个名为 child1.jsx 和 child2.jsx 的组件文件。

项目目录：应该是这个样子。

示例：在相应的文件中写下以下代码。

child1.jsx

import React, { Component } from 'react';
   
class Child1 extends Component {
  render() {
    return (
      

        This is child1 component.
      
    );
  }
}
   
export default Child1;

child2.jsx

import React, { Component } from 'react';
   
class Child2 extends Component {
  render() {
    return (
      

        This is Child2 component.
      
        
    );
  }
}
   
export default Child2;

现在，我们将更改App.js组件文件的默认代码。此外，我们将在 App 组件中嵌入 child1 和 child2 组件。

应用程序.js

import React, { Component } from 'react';
import Child1 from './components/child1';
import Child2 from './components/child2';
   
class App extends Component {
  render() {
    return (
      

        
This is a parent component
        
        
      
    );
  }
}
   
export default App;

运行步骤：要启动 react 应用程序，请在终端上运行以下命令并验证 react 应用程序是否正常工作。

npm start

输出：您将看到 react 应用程序在 localhost:3000 上启动，没有任何困难。这里，App 组件是 child1 和 child2 组件的父组件。