在 React.js 中创建函数式组件

react jsjavascript libraryfront end technology更新于 2025/11/6 22:36:17

让我们看看如何创建简单的 React 函数式组件

组件是 React 库的构建块。组件有两种类型。

有状态组件
无状态组件

有状态组件具有一个可在内部操作的本地状态对象。

无状态组件没有本地状态对象，但我们可以使用 React Hooks 在其中添加一些状态。

创建一个简单的 ES6 函数

const player = () => {
}

这里我们使用 const 关键字来修饰函数名，以防止其被意外修改。让我们添加一个包含一些 jsx 代码的 return 语句。

const player = () => {
   return (
      <p>I'm a Player</p>
   );
}

要在 JavaScript 文件中使用 jsx，我们必须像下面这样导入 React

import React from 'react';
const player = () => {
   return (
      <p>I'm a Player</p>
   );
}

最后，我们必须导出这个函数

export default player;

现在，我们可以通过下面的 import 语句使用这个函数组件。

实际文件的路径可能需要根据相对位置进行更改。

import Player from './Player'

如果您注意到上面的 import 语句中没有提到文件扩展名。这是因为构建工作流默认将其视为 js 或 jsx 文件类型。如果文件类型不同，我们还需要指定文件的扩展名。

这个 Player 函数组件可以在 jsx 元素中使用，例如 −

<Player/>

这个函数组件可以在任何地方使用，并且可以多次使用。它是一个可重复使用的组件。

添加动态内容

我们有一个下面的播放器组件

import React from 'react';
const player = () => {
   return (
      <p>I'm a Player</p>
   );
}
export default player;

播放器组件在 app.js 文件中导入

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Player from './Player'
function App() {
   return (
      <div className="App">
         <Player/>
         <Player/>
         <Player/>
      </div>
   );
}
export default App;

现在，假设我们想显示每个玩家的一些随机分数，那么我们可以像下面这样 −

import React from 'react';
const player = () => {
   return (
      <p>I'm a Player: My score {Math.floor(Math.random() * 50)}</p>
   );
}
export default player;

保存文件后，在项目目录的终端上运行 npm start。

要在 jsx 中添加动态内容，我们可以在 {} 括号内进行操作。

让我们看看如何为函数组件添加属性 (Property) 或特性 (Attribute)

import React from 'react';
import './App.css';
import Player from './Player'
function App() {
   return (
      <div className="App">
         <Player name="Smith" score="100"/>
         <Player name="David" score="99">Plays for Australia </Player>
         <Player name="Phil" score="80"/>
      </div>
   );
}
export default App;

我们可以像上面一样向 Player 元素添加属性。要访问为 Player 定义的函数组件中的属性，我们必须传递如下所示的参数。

import React from 'react';
const player = (props) => {
   return (
      <p>I'm a Player: My name {props.name} and my score is {props.score}</p>
   );
}
export default player;

函数参数的名称可以不同，但标准做法是使用 props 作为其名称。我们使用 props.name 和 props.score

括号中的 props.name 和 props.score

访问属性。

访问 JSX 元素的子元素

玩家 David 有一个 children 属性，我们可以像下面这样访问它。 −

import React from 'react';
const player = (props) => {
   return (
      <div>
         <p>I'm a Player: My name {props.name} and my score is {props.score}</p>
         {props.children}
      </div>
   );
}
export default player;

{props.children} 属性使我们能够访问该文本。