React 组件

组件类似于返回 HTML 元素的函数。

React 组件

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

组件有两种类型，类组件和功能组件，在本教程中，我们将重点介绍功能组件。

创建第一个组件

创建 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>;
}

渲染组件

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

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

实例

在 "root" 元素中渲染 Car 组件:

import React from 'react';
import ReactDOM from 'react-dom';
function Car() {
  return <h2>Hi, I am a Car!</h2>;
}
ReactDOM.render(<Car />, document.getElementById('root'));

Props

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

props 类似于函数参数，您可以将它们作为属性发送到组件中。

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

实例

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

import React from 'react';
import ReactDOM from 'react-dom';
function Car(props) {
  return <h2>I am a {props.color} Car!</h2>;
}
ReactDOM.render(<Car color="red"/>, document.getElementById('root'));

组件中的组件

我们可以参考其他组件中的组件:

实例

在 Garage 组件内使用 Car 组件:

import React from 'react';
import ReactDOM from 'react-dom';
function Car() {
  return <h2>I am a Car!</h2>;
}
function Garage() {
  return (
    <>
        <h2>Who lives in my Garage?</h2>
        <Car />
    </>
  );
}
ReactDOM.render(<Garage />, document.getElementById('root'));

js 文件中的组件

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';
import Car from './Car.js';
ReactDOM.render(<Car />, document.getElementById('root'));