如何将一个反应组件传递给另一个组件以嵌入第一个组件的内容？

有两种方法可以将一个反应组件传递给另一个组件。

创建 React 应用程序：在继续使用该方法之前，您必须创建一个 React 应用程序。

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app foldername

第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：

cd foldername

项目结构：它将如下所示。

1.使用this.props.children

这样，组件 First 可以使用 this.props.children 属性访问 Second 组件。

{this.props.children}

第一种方法：App.js从 src 文件夹打开 App.js 文件并将其编辑为：

Javascript

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

        
App
 
        
         
        
      
    );
  }
}
export default App
  
  
class First extends React.Component {
   
  render() {
    return 

        
 First Component
        {this.props.children}
    
;
  }
}
  
class Second extends React.Component{
  
    render() {
        return 

            
 Second Component
        
    }
}

2. 作为道具传递给另一个组件

} >

因此 First 组件可以使用 this.props.secondcomp 属性访问该组件。

{this.props.second}

第二种方法：App.js从 src 文件夹打开 App.js 文件并将其编辑为：

Javascript

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

        
App
 
        } >
           
        
      
    );
  }
}
export default App
class First extends React.Component {
   
  render() {
    return 

        
 First Component
        {this.props.secondcomp}
    
;
  }
}
class Second extends React.Component{
  
    render() {
        return 

            
 Second Component
        
    }
}

输出：两种方法都会给出相同的输出