如何在 ReactJS 的无状态功能组件中访问 props.children？

{道具。 children} 允许您创建一个通用模板，该模板可以在调用时由父级修改。通过这种方式，父组件可以轻松地将任何必要的东西传递给它的子组件，甚至是生成的布局特征。每当您调用组件时，它都会自动显示它在其开始和结束标记之间的任何内容。带有子项的组件始终使用开始和结束标记进行标识。每个孩子都必须介于这两个标签之间。

props 是通过在父组件中定义 props 并将它们向下传递给下一个子组件，然后再次通过子组件中的 props 传递值，然后再次通过孙子组件来实现的——这样重复直到传递的值的值到达目标组件。这是一个乏味且容易出错的过程，会降低代码的灵活性。

{props. children}：实现非常简单。将子组件导入父组件，但不要使用自关闭标签调用它，而是使用标准的打开/关闭标签。除了传递 props 的标准实现之外，信息在子组件的开始标签和结束标签之间传递。

为什么需要{props.孩子们}？

如果我们想要一个灵活的组件，它可以存储父组件的开始标签和结束标签之间的任何内容，并保留其所有子组件的格式样式，那么 {props.孩子}是我们需要的。在某些情况下，您可能事先不知道它的孩子，所以您只需传递 {props. children} 指定将包含在开始标签和结束标签之间的任何内容。这用于创建布局。标准道具不能指定其他组件的样式。可能需要创建某些组件保持相同的布局，但其中的内容略有不同，因此创建不同的组件以呈现具有不同样式的数据可能不是一个好习惯。当一个组件想要将信息传递给它的孙子和后续的子时，它工作得很好，直到大量的子增长到许多道具相同并且需要稍微修改的程度。使用数百个道具时，很难理解每个道具的功能。使用 {props.孩子}，避免支柱钻孔。

优点：

• 避免支柱钻孔
• 帮助创建组合组件
• 有助于构建布局
• 为了将未知的相似元素分组为父元素。
• 我们可以在事先不知道元素时使用它们。

让我们借助代码示例来理解。

方法：让我们设计一个简单的 Card 组件。我们将通过 [props.孩子]，看看我们的卡片是如何出现的。

• 创建名为“cards”的反应应用程序
• 创建一个按钮组件
• 创建卡片组件
• 在 App 组件中创建多张卡片。

第 1 步：创建 React 应用程序“卡片”。创建一个项目目录，转到终端，然后使用以下命令创建一个名为“cards”的 React 应用程序：

npx create-react-app cards

创建卡片应用程序后，通过键入以下命令切换到新文件夹卡片：

cd cards

第 2 步：修改您的项目结构。目录结构目前如下所示：

默认项目结构

我们将修改文件夹并保留此示例所需的文件。现在，确保您的文件结构如下所示：

目录结构

这是最终项目结构的外观：

最终项目结构

第 3 步：在index.html中编写以下代码。在您的 index.html 文件中包含以下代码，该文件位于项目目录的公共文件夹中。

index.html

第 4 步：创建按钮组件。在 src 文件夹中创建一个名为 Button.js 的新文件。该组件将具有三个按钮。我们将使用标准方法在前两个按钮中使用 props，将数据从父组件向下传递到按钮组件，而在第三个按钮中，我们将使用 {props.孩子们}。按钮组件将显示其开始和结束标记中包含的任何内容。

将以下代码添加到Button.js文件。

按钮.js

import React from 'react';
  
const buttonstyle={
  backgroundColor:'white',
  border: '2px solid #4CAF50',
  color: 'black',
  padding: '4px',
  textAlign: 'center',
  fontSize: '16px',
  margin: '4px 2px',
  cursor: 'pointer',
   
}
  
  
const Button = (props) => {
  return 

      
      {props.button1}
      
      {props.button2}
      {props.children}
        
       
  
;
};
  
export default Button;

第 5 步：创建卡片组件。在 src 文件夹中创建一个新文件Card.js。在这里，我们将创建一个 Card 组件。我们将使用 {props.孩子们}。

Card.js

import React from 'react';
  
const Card = (props) => {
  return 

  
{props.children}
  
;
};
export default Card;

第 6 步：从App.js文件中删除现有代码并将其替换为以下代码以呈现组件。我们将使用 Card 组件创建四张卡片。第一张卡片包含

标签中的文本。第二张卡片有一个标题、一条横线和一个副标题。第三张卡片的

标签中有文字。第四张卡片嵌入了一个按钮组件。在前两个按钮组件中，传递了标准道具，然后是标题、水平线和最后一个按钮中的文本。开始和结束标签中包含的所有元素都将使用 {props.孩子们}。

应用程序.js

import Card from './Card';
import Button from './Button';
function App() {
  return (
  <>
  {/* card 1 */}
  
   

    Hello,GEEKS!
   
  
    
  
  
    {/* card 2  */}
    
      
Welcome to GeeksforGeeks
      

     
A computer Science portal for Geeks. 
    
  
    {/* card 3  */}
    
    

      It contains well written , well thought and well 
      explained computer science articles. 
    
 
    
  
    {/* card 4 */}
    
     
     
CONTRIBUTE
     

    Pick suggested articles and get started .
     
    
    
  
  );
}
export default App;

第 7 步：在index.js文件中编写以下代码。 index.js 文件作为主要入口点，在其中，App.js 文件在 DOM 的根 ID 处呈现。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
  
import App from './App';
  
ReactDOM.render(, document.getElementById('root'));

运行应用程序的步骤：现在让我们使用以下命令运行我们的应用程序。

npm start

输出：默认情况下，React 项目将在端口 3000 上运行。您可以在浏览器上通过 localhost:3000 访问它。您会看到，每张卡上的数据不同，但布局保持不变。卡片内容的格式不同。

props.children 的实现——工作输出