React 默认道具


在这篇文章中,我们将学习 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 提供了一种更好的方法,并且能一次完成。各位,我将向你们展示 defaultPropsdefaultProps 是 React 组件中的一个属性,用于为道具 参数设置默认值。如果道具属性被传递,它将被更改。

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

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

ES6 反应组件

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

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

我们的 CatComponent 将如下所示:

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

我们在 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。定义默认道具也很容易:

image

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

image

结论

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

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

推荐阅读
作者信息
AgoraTechnicalTeam
TA 暂未填写个人简介
文章
169
相关专栏
本专栏仅用于分享音视频相关的技术文章,与其他开发者和 Agora 研发团队交流、分享行业前沿技术、资讯。发帖前,请参考「社区发帖指南」,方便您更好的展示所发表的文章和内容。