React 是一种流行的 JavaScript 库，用于构建动态用户界面。它提供了一个可复用的组件系统，使开发人员可以在应用程序中创建自定义组件。在本文中，我们将介绍如何在 React 中实现自定义组件。
创建 Class 组件
React 提供了两种组件类型：函数组件和 Class 组件。我们将首先看一下如何创建一个 Class 组件。以下是一个简单的示例：
-- -------------------- ---- -------
------ ----- ---- --------
----- ----------- ------- --------------- -
-------- -
------ ----------- -------------
-
-
------ ------- ------------我们定义了一个名为 MyComponent 的组件，它继承了 React.Component 类。组件有一个必需的方法， render，它定义了组件要渲染的内容。在这个例子中，我们将渲染一个简单的 div 元素。
使用组件
要在应用程序中使用组件，我们需要将组件导入到另一个文件中，并使用它。以下是一个示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----------- ---- ----------------
----- --- ------- --------------- -
-------- -
------ -
-----
------------ --
------
--
-
-
------ ------- ----在这个例子中，我们将 MyComponent 导入到 App 组件中，并将其作为子组件渲染。请注意，我们在 JSX 中将组件写成标签形式 （<MyComponent />），而不是字符串形式 （'MyComponent'）。
传递属性
我们可以将属性传递给组件，以根据需要自定义它的行为。以下是一个示例：
-- -------------------- ---- -------
------ ----- ---- --------
----- ----------- ------- --------------- -
-------- -
------ --------------------------------
-
-
------ ------- ------------在这个例子中，我们定义了一个名为 message 的属性，然后在 render 方法中使用 {this.props.message} 来引用它。
我们可以在使用组件时传递属性。以下是示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----------- ---- ----------------
----- --- ------- --------------- -
-------- -
------ -
-----
------------ --------------- ------- --
------
--
-
-
------ ------- ----在此示例中，我们将 message 属性设置为 “Hello, World!”。当 MyComponent 组件呈现时，它将显示 “Hello, World!”。
状态
在某些情况下，我们可能想要在组件内部存储状态。例如，我们可能想追踪用户是否按下了按钮。以下是一个示例：
-- -------------------- ---- -------
------ ----- ---- --------
----- ----------- ------- --------------- -
------------------ -
-------------
---------- - - -------- ----- --
---------------- - ----------------------------
-
------------- -
--------------- -------- ---- ---
-
-------- -
------ -
-----
------------------- - ---------- - ---- ---------
------- -------------------------------- -----------
------
--
-
-
------ ------- ------------在这个例子中，我们定义了一个名为 clicked 的状态变量。我们还定义了一个名为 handleClick 的方法，它将 clicked 状态设置为 true。在 render 方法中，我们根据这个状态的值决定要显示的内容。我们还将 handleClick 函数传递给 button 元素的 onClick 属性。
结论
在 React 中，自定义组件可以提供非常有用的功能。我们可以创建复杂的用户界面元素，通过属性自定义它们的行为，并使用状态来追踪组件的内部状态。现在，您已经学会了如何创建和使用自定义组件，希望您可以将这些概念应用于自己的项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671399a0ad1e889fe20e7756