反应JS |道具 - 设置 2

在我们之前的文章 ReactJS | Props – Set 1 我们讨论了 props、传递和访问 props、将 props 从一个组件传递到另一个组件等。在本文中，我们将继续讨论 props。
那么，如果我们想使用 props 将一些默认信息传递给我们的组件怎么办。 React 允许我们这样做。为此，React 为我们提供了名为defaultProps的东西。让我们详细了解一下：

默认道具

defaultProps 是一种方法，我们可以使用它来为特定类存储尽可能多的信息。并且可以从该特定类中的任何位置访问此信息。您在defaultProps中添加的每条信息都将作为该类的道具添加。在这一点上可能看起来很混乱。让我们看一个程序，我们将使用defaultProps为类创建一些道具。

打开你的 react 项目目录并编辑 src 文件夹中的App.js文件：

src App.js：

javascript

import React from 'react';
import ReactDOM from 'react-dom';
 
// Component
class ExampleClass extends React.Component{
    render(){
        return(
                

                    {/* using default prop - title */}
                    
This is {this.props.title}'s Website!
                
            );
    }
}
 
// Creating default props for
// ExampleClass Component
ExampleClass.defaultProps = {
    title: "GeeksforGeeks"
}
 
ReactDOM.render(
    ,
    document.getElementById("root")
);

输出：

您可以在上面的程序中看到，我们在ExampleClass类之外创建了一个名为title的默认道具，并使用this.props语句访问了该类中的这个道具。
我们也可以将数组作为道具传递，而不是传递单个元素。让我们看看它是如何在下面的程序中完成的：
打开你的 react 项目目录并编辑 src 文件夹中的App.js文件：

src App.js：

javascript

import React from 'react';
import ReactDOM from 'react-dom';
 
// Component
class ExampleClass extends React.Component{
    render(){
        return(
                

                    {/* accessing array prop directly */}
                    
The names of students are: {this.props.names}
                
            );
    }
}
 
// Passing an array as prop
ExampleClass.defaultProps = {
    names: ['Ram', 'Shyam', 'Raghav']
}
 
ReactDOM.render(
    ,
    document.getElementById("root")
);

在上面的程序中，我们将一个名称数组作为 prop 传递给组件 ExampleClass。我们还直接访问了这个数组来打印数组的内容。以下是呈现上述代码时的输出：

您可以在上面的输出中看到，直接使用this.props语句打印数组的内容，只需打印数组中的所有元素，无需任何格式。但这看起来不太好，对吧？这不是我们在其他编程语言中打印数组元素的方式。如果我们想在打印数组元素之前添加一些格式怎么办？或者换句话说，如果我们想迭代作为 props 传递的数组怎么办？为此，我们可以使用 JavaScript 中可用的 map() 方法。我们必须将一个函数作为参数传递给 map 方法。该函数将接受两个参数，其中第一个是数组项，第二个是数组项的索引。要详细了解 map()，请访问此链接。让我们看看下面的代码，其中我们使用 map() 方法迭代作为 defaultProp 传递给组件的数组：

打开你的 react 项目目录并编辑 src 文件夹中的App.js文件：

src App.js：

javascript

import React from 'react';
import ReactDOM from 'react-dom';
 
// Component
class ExampleClass extends React.Component{
    render(){
        return(
                

                    {/* iterating over array using map() */}
                    
{this.props.names.map(
                        function namesIterator(item,i){
                            return (
                                    "Student "+ (i+1) +": " +
                                     item+
                                     ((i!=2)?',  ':'\n')
                                )
                        }
 
                        )}
                
            );
    }
}
 
// Passing an array as prop
ExampleClass.defaultProps = {
    names: ['Ram', 'Shyam', 'Raghav']
}
 
ReactDOM.render(
    ,
    document.getElementById("root")
);

输出：

您可以在上面的程序中看到我们如何使用 map() 遍历传递给组件ExampleClass的数组。
这就是本文的全部内容。在我们的下一篇文章中，我们将看到如何验证 props 中的类型或如何执行类型检查。