資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究在 React.js 中建立函式式元件
讓我們看看如何建立一個簡單的 React 函式式元件
元件是 React 庫的構建塊。元件有兩種型別。
- 有狀態元件
- 無狀態元件
有狀態元件有一個本地狀態物件，可以在內部進行操作。
無狀態元件沒有本地狀態物件，但我們可以在其中使用 React hook 新增一些狀態。
建立一個簡單的 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 Player from './Player'
如果您注意到，上面的匯入語句中沒有提到副檔名。這是因為構建工作流預設情況下會自動將其視為 js 或 jsx 檔案型別。如果檔案型別不同，則也需要提及副檔名。
此 Player 函式式元件可以在 jsx 元素中使用，例如：
<Player/>
此函式式元件可以在任何地方使用，也可以多次使用。它是一個可重用的元件。
新增動態內容
我們有一個下面的 Player 元件
import React from 'react';
const player = () => {
return (
<p>I'm a Player</p>
);
}
export default player;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 中新增動態內容，我們可以在 {} 花括號內執行此操作。
讓我們看看如何向函式式元件新增屬性或特性
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 在 {} 花括號內**訪問屬性
訪問 JSX 元素的子元素
我們在 David 的 player 上有一個 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} 屬性使我們能夠訪問該文字。
2K+ 閱讀量
