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>;
}
渲染组件
现在您的 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 />);