React 是一个非常流行的前端框架，它使用组件化的思想来构建用户界面。在使用 React 开发应用程序时，我们常常需要定义组件的属性，以便在不同的场景下使用不同的属性值。在本文中，我们将介绍如何使用 ECMAScript 2018 来实现 React 组件的可选属性和默认属性。
可选属性
在 React 中，我们可以通过定义组件的 propTypes 属性来指定组件的属性。propTypes 属性是一个对象，用于定义组件的所有属性及其类型。但是，有时候我们需要让某些属性是可选的，即在使用组件时可以不传递这些属性，这时我们可以使用 defaultProps 属性来实现。
默认情况下，在 React 组件中，所有的属性都是必需的，如果没有传递某个属性，组件将会抛出一个错误。但是，通过使用 defaultProps 属性，我们可以设置一些属性的默认值，这样即使没有传递这些属性，组件也可以正常使用。
下面是一个例子，演示如何使用 defaultProps 属性来设置组件的默认属性：
-- -------------------- ---- -------
------ ----- ---- --------
----- ----------- ------- --------------- -
-------- -
----- - ----- --- - - -----------
------ -
-----
-------- ----------
------- ---------
------
--
-
-
------------------------ - -
----- ----- -----
---- ---
--
------ ------- ------------在这个例子中，我们定义了一个 MyComponent 组件，并设置了两个属性：name 和 age。然后，我们通过 defaultProps 属性来设置这两个属性的默认值。如果在使用 MyComponent 组件时没有传递这两个属性，组件将会使用默认值。
默认属性
在 React 中，有时候我们需要设置某些属性的默认值，即使这些属性在使用组件时被传递了其他值。在这种情况下，我们可以使用 ES6 中的解构赋值语法来实现。
例如，假设我们有一个组件，它接收一个 person 对象作为属性，其中包含 name 和 age 两个属性。我们想要设置 age 属性的默认值为 30，即使传递的 person 对象中没有 age 属性。可以使用以下代码实现：
-- -------------------- ---- -------
------ ----- ---- --------
----- ----------- ------- --------------- -
-------- -
----- - ------- - ----- --- - -- - - - -----------
------ -
-----
-------- ----------
------- ---------
------
--
-
-
------ ------- ------------在这个例子中，我们使用解构赋值语法来提取 person 对象中的 name 和 age 属性，并将 age 属性的默认值设置为 30。
总结
在本文中，我们介绍了如何使用 ECMAScript 2018 来实现 React 组件的可选属性和默认属性。通过使用 defaultProps 属性，我们可以设置一些属性的默认值，使组件在没有传递这些属性时仍能正常使用。通过使用解构赋值语法，我们可以设置某些属性的默认值，即使这些属性在使用组件时被传递了其他值。这些技术在 React 开发中非常实用，希望本文能够对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65f7c32bd10417a2223152f5