React 组件：构建可复用代码片段的秘诀

2023-12-01 20:16:35

React 组件：构建可复用代码片段的秘诀

React 是一个流行的 JavaScript 库，用于构建用户界面。它以其组件化架构而闻名，允许您将 UI 拆分为独立可复用的代码片段。组件可以被组合起来创建更复杂的 UI，从而使构建复杂的应用程序变得更加容易。

组件的本质

组件类似于 JavaScript 函数，它们接受输入（称为 props）并返回输出（称为元素）。组件的输入和输出都使用一种称为 JSX 的语法来定义。JSX 是 JavaScript 的扩展，它允许您使用 HTML 元素和属性来定义 UI。

组件间通信

组件可以使用 props 进行通信。props 是传递给组件的数据对象。组件可以通过访问 props 对象来获取这些数据。

例如，以下组件接收一个名为 message 的 prop，并在组件的渲染方法中显示该 prop 的值：

const MyComponent = (props) => {
  return <div>{props.message}</div>;
};

您可以在另一个组件中使用 MyComponent 组件并传递一个 message prop，如下所示：

const App = () => {
  return <MyComponent message="Hello, world!" />;
};

当 App 组件被渲染时，它会将 message prop 的值传递给 MyComponent 组件。然后，MyComponent 组件会使用该值来渲染一个 div 元素，其中包含 Hello, world! 文本。

使用组件构建复杂的 UI

组件可以被组合起来创建更复杂的 UI。例如，以下组件是一个简单的导航栏组件：

const Navbar = () => {
  return (
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </nav>
  );
};

您可以将 Navbar 组件嵌入另一个组件中，如下所示：

const App = () => {
  return (
    <div>
      <Navbar />
      <div className="content">
        <h1>Hello, world!</h1>
      </div>
    </div>
  );
};