菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

React 组件


组件就像是返回 HTML 元素的函数。


React 组件

组件是独立的、可重用的代码块。它们的作用与 JavaScript 函数相同,但独立工作并返回 HTML。

组件有两种类型:类组件和函数组件。在本教程中,我们将重点关注函数组件。

在旧的 React 代码库中,您可能会发现主要使用类组件。现在建议使用函数组件以及 Hooks,Hooks 在 React 16.8 中被添加。这里有一个关于类组件的可选部分供您参考。


创建您的第一个组件

创建 React 组件时,组件名称必须以大写字母开头。

类组件

类组件必须包含 extends React.Component 语句。此语句创建到 React.Component 的继承,并使您的组件能够访问 React.Component 的函数。

该组件还需要一个 render() 方法,该方法返回 HTML。

示例

创建一个名为 Car 的类组件

class Car extends React.Component {
  render() {
    return <h2>Hi, I am a Car!</h2>;
  }
}

函数组件

这是与上面相同的示例,但使用了函数组件创建。

函数组件也返回 HTML,并且与类组件的运行方式大致相同,但函数组件可以使用更少的代码编写,更容易理解,并且在本教程中会受到青睐。

示例

创建一个名为 Car 的函数组件

function Car() {
  return <h2>Hi, I am a Car!</h2>;
}


w3schools CERTIFIED . 2022

获得认证!

完成 React 模块,完成练习,参加考试,并获得 w3schools 认证!

$95 注册

渲染组件

现在您的 React 应用程序有了一个名为 Car 的组件,该组件返回一个 <h2> 元素。

要在您的应用程序中使用此组件,请使用与普通 HTML 类似的语法:<Car />

示例

Car 组件显示在“root”元素中

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);

运行示例 »


Props

组件可以作为 props 传递,props 代表属性。

Props 就像函数参数一样,您将它们作为属性发送到组件中。

您将在下一章了解更多关于 props 的信息。

示例

使用属性将颜色传递给 Car 组件,并在 render() 函数中使用它

function Car(props) {
  return <h2>I am a {props.color} Car!</h2>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car color="red"/>);

运行示例 »


组件中的组件

我们可以在其他组件中引用组件

示例

在 Garage 组件中使用 Car 组件

function Car() {
  return <h2>I am a Car!</h2>;
}

function Garage() {
  return (
    <>
      <h1>Who lives in my Garage?</h1>
      <Car />
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);

运行示例 »


文件中的组件

React 关注代码重用,因此建议将组件拆分成单独的文件。

为此,请创建一个带有 .js 文件扩展名的新文件,并将代码放在其中。

请注意,文件名必须以大写字母开头。

示例

这是新文件,我们将其命名为“Car.js”

function Car() {
  return <h2>Hi, I am a Car!</h2>;
}

export default Car;

要使用 Car 组件,您必须在应用程序中导入该文件。

示例

现在我们已经在应用程序中导入了“Car.js”文件,并且可以使用 Car 组件,就像它在此处创建一样。

import React from 'react';
import ReactDOM from 'react-dom/client';
import Car from './Car.js';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);

运行示例 »



×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持