1_-GsJA8f7J8VrL8RouKCjQw.jpeg1280×853 341 KB

在这篇文章中，我们将学习 React 中所有关于默认道具的知识。它不仅会帮助我们更好的开发，还会帮助我们为用户提供更好的体验。让我们开始吧，如果不需要可以跳过介绍哦！

简介

Reactjs，一个基于 JSX 的 JavaScript UI 库，是目前世界上最流行的 JS 库。数以千计的应用程序是使用 React 构建的，它提供了大量的内容：

高性能
方便创建
虚拟DOM
代码重用
基于组件的 UI
在不同平台上运行：移动/平板电脑和桌面
初学者轻松上手

它的创建条件是使用每个视图或视图组使用组件的概念。React 组件类似于 HTML 元素。组件基本上是一个包含以下内容的类：

道具
数据
状态（通过操作 setState() ）
标记（由提供 render() ）

所有这些结合在一起创建了一个 UI 小部件。

所以这很有趣，对吧？

组件是我们用来构建交互式 UI 的主要工具。所有 React 应用程序都有一个根组件，通常称为 App 组件。

React 为组件提供了相互传递数据和响应彼此事件的方法。

你可以编写一个组件并将其用作其他几个组件中的子组件 - 为此目的，它们被设计成自包含和松散耦合。

每个组件都包含有关其自身的宝贵数据：

它需要什么数据作为输入
如何绘制自己

使用 Bit 封装可重用组件，以便你在应用程序中的任何位置运行它们。

https://youtu.be/E5lgoz6-nfs
点击网址进行观看

Bit 将项目中的组件及其所有文件和依赖项封装在一起，因此它们可以在你的应用程序中的任何位置运行。

通过使你的组件开箱即用可重复使用来加快创建速度，并作为团队协作以共享和发现组件。无需重构或配置，只需共享组件并创建真正模块化的应用程序。

开始

声明

正如我们所描述的，React 组件在道具参数中接受输入。

// ES6 class
class CatComponent extends React.Component {
    constructor(props) {}
    render() {
        return <div>{this.props.catName} Cat</div>
    }
}
// Functional component
function CatComponent(props) {
    return <div>{props.catName} Cat</div>
}

这是从父组件传递下来的。

// ES6 class
class CatsComponent extends React.Component {
    constructor(props) {}
    render() {
        return <div><CatComponent catName="Picky" /></div>
    }
}
// Functional component
function CatsComponent() {
    return <div><CatComponent catName="Picky" /></div>
}

你会看到我们传入了一个带有 value Picky 属性的 catName ，CatComponent 将从道具参数中获取属性值。React 中附加到组件的所有属性都通过道具对象传递给子组件。具体会像以下这样传递：

如果我们这样做：

...
    return <div><CatComponent catName="Picky" eyeColor="blue" age="4" /></div>
...

道具参数将是：

props = {
    catName: "Picky",
    eyeColor: "blue",
    age: "4"
}

子组件将从属性名称作为键的道具对象访问它们：

// ES6 class
class CatComponent extends React.Component {
    constructor(props) {}
    render() {
        return <div>{this.props.catName} Cat, Eye Color: {this.props.eyeColor}, Age: {this.props.age}</div>
    }
}
// Functional component
function CatComponent(props) {
    return <div>{props.catName} Cat, Eye Color: {props.eyeColor}, Age: {props.age}</div>
}

这里的问题是 如果父组件没有将任何属性传递给子组件会发生什么？

// ES6 class
class CatsComponent extends React.Component {
    constructor(props) {}
    render() {
        return <div><CatComponent /></div>
    }
}
// Functional component
function CatsComponent() {
    return <div><CatComponent /></div>
}

或者父组件没有传递子组件呈现的所有属性。

// ES6 class
class CatsComponent extends React.Component {
    constructor(props) {}
    render() {
        return <div><CatComponent age="4" /></div>
    }
}
// Functional component
function CatsComponent() {
    return <div><CatComponent age="4" /></div>
}

当然，我们会看到 undefined 演示代替了父组件未发送的道具。

出于某些原因，我们可能决定不传递一些道具，但无论我们不想在我们的应用程序中看到 undefined 的原因可能是什么！！我们的用户都会怀疑我们的应用程序正在崩溃。

解决方案——defaultProps

为了解决这个问题，我们可以使用逻辑运算符 || 设置回退值，因此当缺少道具时，它会显示回退值代替缺少的道具。

// ES6 class
class CatComponent extends React.Component {
    constructor(props) {}
    render() {
        return <div>{this.props.catName || "Sandy"} Cat, Eye Color: {this.props.eyeColor || "deepblue" }, Age: {this.props.age || "120"}</div>
    }
}
// Functional component
function CatComponent(props) {
    return <div>{props.catName || "Sandy"} Cat, Eye Color: {props.eyeColor || "deepblue"}, Age: {props.age || "120"}</div>
}

注意，当未在道具参数中设置时，catName 将显示“Sandy”。此外，eyeColor 将显示“深蓝色”，年龄将显示“120”。

这是正常的，但我们不会去附加 || 到我们所有的代码。React 提供了一种更好的方法，并且能一次完成。各位，我将向你们展示 defaultProps 。 defaultProps 是 React 组件中的一个属性，用于为道具参数设置默认值。如果道具属性被传递，它将被更改。

defaultProps 可以定义为组件类本身的属性，以设置类的默认道具。- React 博客

在接下来的部分中，我们将看看如何在 ES6 类和功能组件中使用 defaultProps。

ES6 反应组件

使用 ES6 类，我们将这个属性命名为 defaultProps .

class ReactComp extends React.Component {}
ReactComp.defaultProps = {}
// or
class ReactComp extends React.Component {
    static defaultProps = {}
}

我们的 CatComponent 将如下所示：

image.png671×685 4.92 KB

你会看到所有这些 || 都消失了，使我们的代码看起来整洁而专业。

我们在 CatComponent 类上定义了一个静态属性 defaultProps ，其中包含我们希望道具在未传递时具有的值。

功能组件

在 React 中，我们可以使用函数作为组件来呈现视图。与其对应的 ES6 组件一样，我们可以通过向 defaultProps 函数添加静态属性来向组件添加默认道具：

function Reactcomp(props) {}
ReactComp.defaultProps = {}

我们的功能 CatComponent 变为：

// Functional component
function CatComponent(props) {
    return <div>{props.catName} Cat, Eye Color: {props.eyeColor}, Age: {props.age}</div>
}
CatComponent.defaultProps = {
    catName: "Sandy",
    eyeColor: "deepblue",
    age: "120"    
}

在 TypeScript 中的使用

如果你决定以 TypeScript 的形式使用类型化 JavaScript。定义默认道具也很容易：

在功能组件中仍然很容易：

结论

在本文中，我们看到了为 React 组件中的道具参数设置默认值的方法，无论是 ES6 类还是功能组件。这是工具带的另一个提示。如果你对此有任何疑问，欢迎随时发表评论：) ，谢谢！！！

原文作者 Chidume Nnamdi
原文链接 https://blog.bitsrc.io/understanding-react-default-props-5c50401ed37d