React Native 入門 jsx tsx 基礎語法

React Native 入門 jsx 基礎語法

JSX 介紹

JSX (JavaScript XML) 是一種 JavaScript 的語法擴展,允許你在 JavaScript 文件中編寫類似 HTML 的代碼。它是 React 和 React Native 應用程序中用來描述 UI 的主要方式。

image-20250428074413843

JSX 的特點

  • JSX 看起來像 HTML,但實際上是 JavaScript 的語法糖
  • JSX 讓你可以在 JavaScript 代碼中直接編寫標簽結構
  • JSX 通過轉譯器(如 Babel)被轉換為純 JavaScript 函數調用
  • JSX 使組件的結構和行為可以寫在一起,提高代碼的可讀性和維護性

TSX 與 JSX 的區別

TSX 是 TypeScript 與 JSX 的結合:

  • TSX = TypeScript + JSX
  • .tsx 文件中,你可以使用 JSX 語法,同時享受 TypeScript 的類型檢查
  • TypeScript 為 JSX 元素和組件提供了類型安全,幫助開發者在編譯時發現潛在問題
  • TSX 文件中可以定義接口、類型和類型注解,增強代碼的可維護性和可靠性

JSX 和 TSX 的工作原理

當你寫下:

<View><Text>Hello, World!</Text>
</View>

它會被轉譯為:

React.createElement(View,null,React.createElement(Text, null, "Hello, World!")
);

TypeScript 會在這個過程中進行類型檢查,確保你使用的組件和屬性都符合預期的類型定義。

目錄結構

img

├── android/                  # Android平臺相關文件
│   ├── app/                  # Android應用特定配置
│   ├── build.gradle          # Android項目構建配置
│   ├── settings.gradle       # Android項目設置
│   ├── gradle.properties     # Gradle屬性配置
│   ├── gradlew               # Gradle包裝器腳本(Unix)
│   └── gradlew.bat           # Gradle包裝器腳本(Windows)
│
├── ios/                      # iOS平臺相關文件
│   ├── AwesomeProject1/      # iOS應用特定文件
│   ├── Podfile               # iOS依賴管理配置
│   └── AwesomeProject1.xcodeproj/ # Xcode項目文件
│
│
├── __tests__/                # 測試文件目錄
│   └── App.test.tsx          # App組件的測試文件
│
├── node_modules/             # npm依賴包安裝目錄
│
├── App.tsx                   # 應用主要組件,定義UI和邏輯
├── index.js                  # 應用入口文件,注冊應用組件
│
├── package.json              # 項目信息和npm依賴配置
├── package-lock.json         # npm依賴版本鎖定文件
├── app.json                  # React Native應用配置
│
├── babel.config.js           # Babel轉譯器配置
├── metro.config.js           # Metro打包器配置
├── .eslintrc.js              # ESLint代碼檢查配置
├── .prettierrc.js            # Prettier代碼格式化配置
├── .watchmanconfig           # Watchman文件監控配置
├── jest.config.js            # Jest測試框架配置
├── tsconfig.json             # TypeScript配置
│
├── Gemfile                   # Ruby gems依賴配置(iOS構建相關)
├── .bundle/                  # Ruby bundle安裝目錄
│
└── README.md                 # 項目說明文檔

JSX 介紹

JSX and React 是相互獨立的 東西。但它們經常一起使用,但你 可以 單獨使用它們中的任意一個,JSX 是一種語法擴展,而 React 則是一個 JavaScript 的庫。

JSX 是 JavaScript 語法擴展,可以讓你在 JavaScript 文件中書寫類似 H 標簽。

javascript xml 在書寫 js 的時候,直接寫標簽 把標簽也看成 js 中的一種 類型

tsx typescript +xml

img

最簡結構

import { Text, View } from "react-native";export default function App() {return (<View><Text>jsx語法</Text></View>);
}

img

JSX 規則

image-20250428074506209

只能返回一個根元素

import { Text, View } from "react-native";export default function App() {return (<View><Text>jsx語法</Text></View>);
}

如果你想要同時返回多個結構,可以使用 <></>語法把他們包裹起來

import React from "react";
import { Text } from "react-native";export default function App() {return (<><Text>jsx語法1</Text><Text>jsx語法2</Text></>);
}

標簽必須閉合

不管單標簽還是雙標簽都必須閉合

import { Button } from "react-native";export default function App() {return <Button title="點我" />;
}

使用駝峰式命名法給 大部分屬性命名!

import { Alert, Button } from "react-native";export default function App() {return (<Buttontitle="點我"onPress={() => {Alert.alert("被征用");}}/>);
}

JSX 注釋

{// 這里是單行注釋
}
{/*這里是多行注釋這里是多行注釋這里是多行注釋這里是多行注釋*/
}

JSX 表達式

jsx 表達式可以讓我在標簽中嵌入表達式

import { Text, View } from "react-native";export default function App() {const msg = "我們的rn";const getNum = () => 100;return (<View>{/* 普通標簽 */}<Text>普通標簽</Text>{/* 數學運算 */}<Text>{1 + 1}</Text>{/* 字符串 */}<Text>{"a" + "b"}</Text>{/* 變量 */}<Text>{msg}</Text>{/* 三元表達式 */}<Text>{1 + 1 === 2 ? "對了" : "錯誤"}</Text>{/* 函數調用 */}<Text>{getNum()}</Text></View>);
}

屬性上使用表達式

import { Button } from "react-native";export default function App() {const title = "登錄";const showMsg = () => {};return <Button onPress={showMsg} title={title} />;
}

JSX 嵌套 JSX

可以把標簽也看成是一種特殊的變量來理解以下代碼

import { Text, View } from "react-native";export default function App() {return (<View style={{ padding: 10, backgroundColor: "yellow" }}>{<View style={{ padding: 10, backgroundColor: "blue" }}>{<Text style={{ padding: 10, backgroundColor: "orange" }}>哈哈</Text>}</View>}</View>);
}

img

JSX 條件渲染

image-20250428074542006

JSX 中實現條件渲染,可以三種方式

  1. 短路運算
  2. 三元表達式
  3. 如果是更加復雜的結構,函數中結合 if/else 來實現

短路運算

import { Button, View } from "react-native";export default function App() {return (<View><View>{true && <Button title="男" />}</View>;<View>{false && <Button title="女" />}</View>;</View>);
}

三元表達式

import { Button, View } from "react-native";export default function App() {return (<View><View>{true ? <Button title="男" /> : <Button title="女" />}</View>;</View>);
}

函數內 if/else

import { Button, View } from "react-native";export default function App() {const showBtn = () => {if (1 === 1) {return <Button title="111" />;} else {return <Button title="222" />;}};return (<View><View>{showBtn()}</View>;</View>);
}

jSX 列表渲染

image-20250428074711463

主要通過數組的 map 函數來實現

import { Button, View } from "react-native";export default function App() {const list = ["🍉", "🍎", "🍌", "🍇"];return (<View>{list.map((v, i) => (<Button title={v + i} key={v} />))}</View>);
}

樣式

React Native 中,推薦組件和組件樣式分離的寫法 StyleSheet.create

import { Text, View, StyleSheet } from "react-native";export default function App() {return (<View style={styles.container}><Text>樣式</Text></View>);
}const styles = StyleSheet.create({container: {backgroundColor: "blue",padding: 10,},
});

自定義組件 基本使用

后期可以根據需求,對組件進行導入、導出使用

import { Text, View } from "react-native";export default function App() {return (<View><Text>父組件</Text><Child /></View>);
}function Child() {return <Text>子組件</Text>;
}

useState

image-20250428074630970

useState 是 React 中用于更新狀態的技術

useState 是一個函數,傳入要設置的狀態的初始值,返回一個數組,第一個元素是數據本身,第二個元素是修改元素的函數。

import { useState } from "react";
import { View, Button } from "react-native";export default function App() {const [num, setNum] = useState(0);return (<View><Buttontitle={num.toString()}onPress={() => {setNum(num + 1);}}/></View>);
}

需要注意的是,出于性能考慮,修改狀態是異步的

import { useState } from "react";
import { View, Button, Alert } from "react-native";export default function App() {const [num, setNum] = useState(0);return (<View><Buttontitle={num.toString()}onPress={() => {setNum(10);Alert.alert("點擊", num.toString()); // 輸出0}}/></View>);
}

自定義組件 父子傳參

image-20250428074740158

通過普通接口指定參數類型

import { Text, View } from "react-native";// 定義接口 - 更加清晰且可重用
interface ChildProps {color: string;
}export default function App() {let color = "red";return (<View><Text>父組件</Text><Child color={color} /></View>);
}function Child({ color }: ChildProps) {return <Text>子組件{color}</Text>;
}

通過 React.FC 指定參數類型

import React from "react";
import { Text, View } from "react-native";// 定義接口 - 更加清晰且可重用
interface ChildProps {color: string;
}export default function App() {let color = "red";return (<View><Text>父組件</Text><Child color={color} /></View>);
}// 使用React.FC<Props>類型,可以更明確地表明這是一個函數組件
const Child: React.FC<ChildProps> = ({ color }) => {return <Text>子組件{color}</Text>;
};

自定義組件 子父傳參

import React, { useState } from "react";
import { View, Text, Button } from "react-native";// 定義子組件接收的props類型
interface CounterProps {value: number;onIncrement: () => void;
}// 父組件
export default function App() {// 在父組件中維護狀態const [count, setCount] = useState(0);// 定義一個傳遞給子組件的函數const handleIncrement = () => {setCount(count + 1);};return (<View><Text>父組件</Text><Text>父組件中的計數: {count}</Text>{/* 向子組件傳遞屬性和方法 */}<Counter value={count} onIncrement={handleIncrement} /></View>);
}
// 子組件
const Counter: React.FC<CounterProps> = ({ value, onIncrement }) => {return (<View><Text>子組件計數器: {value}</Text><Buttontitle="增加計數"onPress={() => {// 調用父組件傳遞的函數onIncrement();}}/></View>);
};

通過解構傳遞多個參數

import React, { useState } from "react";
import { View, Text, Button } from "react-native";// 定義子組件接收的props類型
interface ChildProps {name: string;age: number;score: number;hobbies: string[];onUpdateAge: () => void;onUpdateScore: (newScore: number) => void;
}// 父組件
export default function App() {// 在父組件中維護多個狀態const [name] = useState("張三");const [age, setAge] = useState(25);const [score, setScore] = useState(85);const [hobbies] = useState(["閱讀", "游泳", "編程"]);// 處理年齡更新const handleAgeUpdate = () => {setAge(age + 1);};// 處理分數更新const handleScoreUpdate = (newScore: number) => {setScore(newScore);};// 解構傳遞多個屬性和方法const childProps = {name,age,score,hobbies,onUpdateAge: handleAgeUpdate,onUpdateScore: handleScoreUpdate,};return (<View><Text>父組件</Text><Text>姓名: {name}, 年齡: {age}, 分數: {score}</Text>{/* 方式1: 逐個傳遞屬性 */}<Childname={name}age={age}score={score}hobbies={hobbies}onUpdateAge={handleAgeUpdate}onUpdateScore={handleScoreUpdate}/>{/* 方式2: 使用展開運算符傳遞所有屬性 */}<Child {...childProps} /></View>);
}// 子組件 - 通過解構直接獲取所需的屬性
const Child: React.FC<ChildProps> = ({name,age,score,hobbies,onUpdateAge,onUpdateScore,
}) => {return (<View><Text>子組件</Text><Text>姓名: {name}</Text><Text>年齡: {age}</Text><Text>分數: {score}</Text><Text>愛好: {hobbies.join(", ")}</Text><Button title="增加年齡" onPress={onUpdateAge} /><Button title="提高分數" onPress={() => onUpdateScore(score + 5)} /></View>);
};

基礎插槽

往自定義組件中插入我們想要的結構。它有以下常見的使用場景

  1. 卡片(Card)組件:包裝內容并提供一致的外觀
  2. 模態框(Modal):包裝彈窗內容,但允許自定義內容
  3. 面板(Panel):帶標題和可折疊功能的內容容器

img

import React from "react";
import { View, Text, Button } from "react-native";// 基礎插槽:使用children
interface CardProps {title: string;children: React.ReactNode; // 定義children插槽
}// 基礎插槽組件
const Card: React.FC<CardProps> = ({ title, children }) => {return (<View><Text>{title}</Text><View>{children}</View></View>);
};// 父組件
export default function App() {return (<View><Text>基礎插槽示例</Text>{/* 基礎插槽用法 */}<Card title="卡片標題"><Text>這是卡片內容</Text><Button title="卡片按鈕" onPress={() => console.log("按鈕點擊")} /></Card></View>);
}

具名插槽

import React from "react";
import { View, Text, Button, StyleSheet } from "react-native";// 具名插槽:使用特定屬性定義多個插槽
interface PanelProps {title: string;header?: React.ReactNode; // 可選的頭部插槽content: React.ReactNode; // 主內容插槽footer?: React.ReactNode; // 可選的底部插槽
}// 具名插槽組件
const Panel: React.FC<PanelProps> = ({ title, header, content, footer }) => {return (<View style={styles.panel}><Text style={styles.panelTitle}>{title}</Text>{/* 頭部插槽 */}{header && <View style={styles.panelHeader}>{header}</View>}{/* 內容插槽 */}<View style={styles.panelContent}>{content}</View>{/* 底部插槽 */}{footer && <View style={styles.panelFooter}>{footer}</View>}</View>);
};// 父組件
export default function App() {return (<View style={styles.container}><Text style={styles.header}>具名插槽示例</Text>{/* 具名插槽用法 */}<Paneltitle="具名插槽"header={<Text style={styles.headerText}>這是自定義頭部區域</Text>}content={<View><Text>這是主要內容區域</Text><Buttontitle="內容區按鈕"onPress={() => console.log("內容區按鈕點擊")}/></View>}footer={<View style={styles.footerButtons}><Button title="取消" onPress={() => console.log("取消")} /><Button title="確定" onPress={() => console.log("確定")} /></View>}/></View>);
}// 樣式
const styles = StyleSheet.create({container: {padding: 16,gap: 16,},header: {fontSize: 20,fontWeight: "bold",marginBottom: 16,},panel: {backgroundColor: "#f9f9f9",borderRadius: 8,borderWidth: 1,borderColor: "#ddd",marginBottom: 16,overflow: "hidden",},panelTitle: {fontSize: 18,fontWeight: "bold",backgroundColor: "#eee",padding: 12,},panelHeader: {padding: 12,backgroundColor: "#f5f5f5",borderBottomWidth: 1,borderBottomColor: "#ddd",},headerText: {fontWeight: "600",},panelContent: {padding: 16,},panelFooter: {padding: 12,backgroundColor: "#f5f5f5",borderTopWidth: 1,borderTopColor: "#ddd",},footerButtons: {flexDirection: "row",justifyContent: "flex-end",gap: 8,},
});

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/78241.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/78241.shtml
英文地址,請注明出處:http://en.pswp.cn/web/78241.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

HDLBIT-程序(Procedures)

始終塊(組合)【Always blocks(combinational)】 答案: Always blocks (clocked) 答案&#xff1a; module top_module(input clk,input a,input b,output wire out_assign,output reg out_always_comb,output reg out_always_ff );assign out_assigna^b;always(*)beginout_a…

值此五一勞動節來臨之際,

值此五一勞動節來臨之際&#xff0c;謹向全體員工致以節日的問候與誠摯的感謝&#xff01;正是你們的敬業與奮斗&#xff0c;成就了今天的成績。愿大家節日愉快&#xff0c;闔家幸福&#xff0c;身體健康&#xff01; #北京先智先行科技有限公司 #先知AI #節日快樂

【經管數據】A股上市公司資產定價效率數據(2000-2023年)

數據簡介&#xff1a;資產定價效率是衡量市場是否能夠有效、準確地反映資產內在價值的重要指標。在理想的市場條件下&#xff0c;資產的市場價格應該與其內在價值保持一致&#xff0c;即市場定價效率達到最高。然而&#xff0c;在實際市場中&#xff0c;由于信息不對稱、交易摩…

云蝠智能大模型智能呼叫:賦能零售行業服務,助力客戶增長

在數字化浪潮席卷全球的今天&#xff0c;零售行業正面臨前所未有的變革壓力。消費者需求日益個性化、市場競爭愈發激烈&#xff0c;傳統的人工客服模式已難以滿足企業對高效觸達、精準營銷和極致體驗的需求。而云蝠智能大模型智能呼叫系統&#xff0c;憑借其突破性的AI技術和深…

IP 互聯網協議

IP&#xff08;Internet Protocol&#xff0c;互聯網協議&#xff09;是網絡通信中的核心協議之一&#xff0c;屬于網絡層協議。它的主要功能是提供數據包的尋址、路由以及傳輸。IP協議負責將數據從源主機傳輸到目標主機&#xff0c;并在網絡中進行轉發。在網絡通信中&#xff…

報文三次握手對么?(?^o^?)?

論TCP報文三次握手機制的理論完備性與工程實踐價值&#xff1a;基于網絡通信協議棧的深度剖析 在計算機網絡領域&#xff0c;傳輸控制協議&#xff08;TCP&#xff09;作為實現可靠數據傳輸的核心協議&#xff0c;其連接建立階段的三次握手機制歷來是網絡工程與協議理論研究的…

HarmonyOS NEXT第一課——HarmonyOS介紹

一、什么是HarmonyOS 萬物互聯時代應用開發的機遇、挑戰和趨勢 隨著萬物互聯時代的開啟&#xff0c;應用的設備底座將從幾十億手機擴展到數百億IoT設備。全新的全場景設備體驗&#xff0c;正深入改變消費者的使用習慣。 同時應用開發者也面臨設備底座從手機單設備到全場景多設…

25.4.30數據結構|并查集 路徑壓縮

書接上回 上一節&#xff1a;數據結構|并查集 前言 &#xff08;一&#xff09;理論理解&#xff1a; 1、在QuickUnion快速合并的過程中&#xff0c;每次都要找根ID&#xff0c;而路徑壓縮讓找根ID變得更加迅速直接。 2、路徑壓縮 針對的是findRootIndex()【查找根ID】進行的壓…

C++-Lambda表達式

目錄 1.什么是 Lambda&#xff1f; 2.例子&#xff1a;打印每個元素&#xff08;和 for_each 一起用&#xff09; 3.捕獲外部變量&#xff08;Capture&#xff09; 3.1. 捕獲值&#xff08;拷貝&#xff09;&#xff1a;[] 3.2. 捕獲引用&#xff1a;[&] 3.3. 指定捕…

每日一題洛谷P8635 [藍橋杯 2016 省 AB] 四平方和c++

P8635 [藍橋杯 2016 省 AB] 四平方和 - 洛谷 (luogu.com.cn) 直接暴力枚舉&#xff0c;不做任何優化的話最后會TLE一個&#xff0c;稍微優化一下就過了&#xff08;數據給的還是太良心了&#xff09; 優化&#xff1a;每層循環用if判斷一下&#xff0c;如果大于n就直接跳 當然…

羅技K580藍牙鍵盤連接mac pro

羅技K580藍牙鍵盤&#xff0c;滿足了我們的使用需求。最棒的是&#xff0c;它能夠同時連接兩個設備&#xff0c;通過按F11和F12鍵進行切換&#xff0c;簡直不要太方便&#xff01; 連接電腦 &#x1f4bb; USB連接 1、打開鍵盤&#xff1a;雙手按住凹槽兩邊向前推&#xff0…

C語言與指針3——基本數據類型

誤區補充 char 的 表示范圍0-127 signed char 127 unsigned char 0-255enum不常用&#xff0c;但是常見&#xff0c;這里記錄一下。 enum Day {Monday 1,//范圍是IntTuesday 2,Wednesday 3 }; enum Day d Monday; switch (d) {case Monday:{printf("%d",Monday);…

如何理解 MCP 和 A2A 的區別?|AI系統架構科普

你有沒有發現,現在越來越多AI項目的架構圖里,都開始出現一些看不懂的新縮寫。 MCP(Multi-component Pipeline),還有另一個也經常出現在大模型系統搭建中的詞,叫 A2A(Agent-to-Agent)。 這倆東西看起來都跟智能體(Agent)有關,但到底有啥區別?誰更強?誰更適合你?…

C語言中 typedef 關鍵字

在C語言中&#xff0c;typedef 關鍵字用于為現有數據類型定義新的別名&#xff08;類型重命名&#xff09;&#xff0c;其核心目的是?提高代碼可讀性?和?簡化復雜類型的聲明?。以下是其用法詳解及典型場景&#xff1a; 1.基本語法? typedef original_type new_type_name…

Learning vtkjs之TubeFilter

過濾器 沿著線生成管道 介紹 vtkTubeFilter - 一個在每條輸入線周圍生成管的過濾器 vtkTubeFilter是一個在每條輸入線周圍生成管的過濾器。管由三角形條帶組成&#xff0c;并隨著線法線的旋轉而旋轉。如果沒有法線存在&#xff0c;它們會自動計算。管的半徑可以根據標量或向…

python常用科學計算庫及使用示例

?一、NumPy - 數值計算基礎庫?? ??安裝?? pip install numpy ??核心功能示例?? 1. 數組創建與運算 import numpy as np# 創建數組 arr np.array([1, 2, 3, 4]) matrix np.array([[1, 2], [3, 4]])# 數學運算 print(arr 1) # [2 3 4 5] print(matrix …

中科院黃飛敏等人證明希爾伯特第六問題使用的或然判斷(估計)-沒有使用演繹推理的必然判斷

國家自然科學基金委在2013年介紹黃飛敏的工作&#xff0c;居然是錯誤的&#xff1a;黃飛敏等人73頁的論文&#xff0c;全篇都是用或然判斷的“估計”代替必然判斷的演繹證明&#xff0c;將沒有實驗的推演當成事實。 首頁 >>年度報告 >>2013年度報告 >>第二部…

【安裝指南】Chat2DB-集成了AI功能的數據庫管理工具

一、Chat2DB 的介紹 Chat2DB 是一款開源的、AI 驅動的數據庫工具和 SQL 客戶端&#xff0c;提供現代化的圖形界面&#xff0c;支持 MySQL、Oracle、PostgreSQL、DB2、SQL Server、SQLite、H2、ClickHouse、BigQuery 等多種數據庫。它旨在簡化數據庫管理、SQL 查詢編寫、報表生…

vite項目tailwindcss4的使用

1、安裝taillandcss 前幾天接手了一個項目&#xff0c;看到別人用tailwindcss節省了很多css代碼的編寫&#xff0c;所以自己也想在公司項目中接入tailwindcss。 官網教程如下&#xff1a; Installing Tailwind CSS with Vite - Tailwind CSS 然而&#xff0c;我在vite中按…

第 13 屆藍橋杯 C++ 青少組省賽中 / 高級組 2022 年真題

一、選擇題 第 1 題 題目&#xff1a;已知char a; float b; double c;&#xff0c;執行語句c a b c;后變量c的類型是&#xff08; &#xff09;。 A. char B. float C. double D. int 正確答案&#xff1a;C 答案解析&#xff1a; 在 C 中&#xff0c;表達式運算會進行類型…