掌握JSX语法:项目实战带你从入门到上手

当前位置:首页 > 广场 > 掌握JSX语法:项目实战带你从入门到上手

掌握JSX语法:项目实战带你从入门到上手

2024-11-18广场19

---

掌握JSX语法:项目实战带你从入门到上手

涓€銆佸垵鎺SX鍙婂叾鍦≧eact涓殑濂囧浣滅敤

1.1 JSX鐨勭畝浠?/p>

JSX锛岃瑾変负JavaScript涓嶺ML鐨勭編濡欑粨鏅讹紝鏄疪eact妗嗘灦涓竴绉嶇嫭鐗圭殑璇硶鎵╁睍銆傚畠涓哄紑鍙戣€呮彁渚涗簡涓€绉嶄互绫籜ML鐨勬柟寮忔潵濉戦€犵粴涓藉褰╃殑鐢ㄦ埛鐣岄潰銆傛兂璞′竴涓嬶紝浣犺兘澶熺洿鎺ュ湪JavaScript鐨勬捣娲嬩腑鐣呮父锛屽悓鏃舵尌娲扝TML鐨勯瓟娉曪紝JSX渚夸负浣犲紑鍚簡杩欐墖绁炵涔嬮棬銆傚畠涓嶄粎浠呯畝鍖栦簡浠g爜鐨勭粨鏋勶紝鏇村湪鏌愮绋嬪害涓婃彁鍗囦簡寮€鍙戠殑鏁堢巼锛岃缂栫▼鍙樺緱鏇村姞鐩磋鍜屾湁瓒c€?/p>

1.2 JSX涓嶫avaScript鐨勫崈涓濅竾缂?/p>

铏界劧JSX浼间箮甯︽湁涓€浜涚绉樼殑鑹插僵锛屼絾瀹冨叾瀹炰笌JavaScript绱у瘑鐩歌繛銆傛墍鏈夌殑JSX浠g爜鍦ㄨ繍琛屾椂閮戒細琚阀濡欏湴杞崲涓烘垜浠墍鐔熸倝鐨勬櫘閫欽avaScript瀵硅薄銆傝繖绉嶈浆鎹㈡満鍒剁‘淇濅簡浠g爜鐨勯珮鏁堟墽琛岋紝鍚屾椂鍊熷姪浜咼avaScript鐨勫己澶у姛鑳斤紝璁╀唬鐮佹棦娓呮櫚鍙堢洿瑙傘€傝繖灏卞儚鏄竴鍦洪瓟娉曡〃婕旓紝JSX浣滀负涓昏锛岃€孞avaScript鍒欐槸瀹冧笉鍙垨缂虹殑鍔╂墜銆?/p>

1.3 浣跨敤JSX鐨勯瓍鍔涙墍鍦?/p>

鉁ㄤ唬鐮佸彲璇绘€э細JSX璇硶鐨勭畝娲佹爣绛剧粨鏋勶紝濡傚悓涓€寮犳竻鏅扮殑鍦板浘锛岃浣犲浠g爜鐨勭粨鏋勪竴鐩簡鐒躲€?/p>

馃殌寮€鍙戞晥鐜囷細鍒╃敤绫籋TML鐨勮娉曪紝寮€鍙戣€呰兘澶熸洿蹇瀯寤哄拰淇敼缁勪欢锛屽噺灏戜簡绻佺悙鐨勫瓧绗︿覆鎿嶄綔锛屼豢浣涙墜鎻′竴鎶婄濂囩殑鍓戙€?/p>

馃寛闆嗘垚鎬э細JSX鏃犵紳鍦颁笌JavaScript浜よ瀺锛岃鏁版嵁缁戝畾銆佷簨浠跺鐞嗙瓑鎿嶄綔鏇村姞寰楀績搴旀墜锛屽鍚屽湪鑸炲彴涓婅嚜鐢辫垶韫堢殑鑸炶€呫€?/p>

浜屻€佹彮寮€JSX鍩虹璇硶鐨勭绉橀潰绾?/h3>

2.1 鎺㈢储JSX鍏冪礌鐨勫熀鏈粨鏋?/p>

---

绗簩绔?JSX鏍稿績鐗规€х殑娣卞叆鐞嗚В

2.2 JSX灞炴€х殑鐏垫椿搴旂敤

鍦↗SX涓紝灞炴€т笌HTML涓殑浣跨敤鏂瑰紡鏈夊紓鏇插悓宸ヤ箣濡欍€傛兂璞′竴涓嬶紝濡傛灉浣犳兂鍞竴鏍囪瘑涓€涓厓绱狅紝浣犲彲浠ュ埄鐢╧ey灞炴€ф潵瀹炵幇銆傛兂璞′竴涓嬩綘鍦ㄦ瀯寤轰竴涓垪琛ㄧ粍浠讹紝姣忎釜鍏冪礌閮芥湁涓€涓嫭鐗圭殑鏍囪瘑锛岃繖鍙樺緱杞昏€屾槗涓俱€?/p>

```javascript

function List() {

const items = ['Apple', 'Banana', 'Cherry'];

return (

{items.map(item => (

{item} // 杩欓噷浣跨敤灞炴€у睍绀烘瘡涓厓绱犵殑鍐呭

))}

);

}

```

杩欑灞炴€х殑搴旂敤浣垮緱缁勪欢闂寸殑浜や簰鏇翠负鐩磋鍜岀畝娲併€?/p>

2.3 JSX涓殑鏉′欢涓庡惊鐜€昏緫

JSX鍏佽浣犲湪鏍囩鍐呴儴鐩存帴浣跨敤鏉′欢璇彞鍜屽惊鐜鍙ワ紝璁╅€昏緫澶勭悊鏇翠负鐩磋銆傛兂璞′竴涓嬩綘鍦ㄥ睍绀轰竴涓敤鎴蜂俊鎭紝鍙湁鐢ㄦ埛淇℃伅瀛樺湪鏃舵墠鏄剧ず濮撳悕锛屽惁鍒欎笉鏄剧ず銆傛棤璁虹敤鎴蜂俊鎭槸鍚﹀瓨鍦紝閮戒細鏄剧ず鐢ㄦ埛鐨勭數瀛愰偖浠躲€傝繖鏍风殑閫昏緫澶勭悊鍦↗SX涓彉寰楅潪甯哥畝鍗曘€?/p>

```javascript

function User({ info }) {

return (

{info &&

Name: {info.name}

} // 浣跨敤鏉′欢璇彞鍒ゆ柇鏄惁闇€瑕佹樉绀哄鍚?/p>

Email: {info.email}

// 涓嶈info鏄惁瀛樺湪閮戒細鏄剧ず鐢靛瓙閭欢淇℃伅

);

}

```

杩欑缁撳悎浣垮緱JSX鏇村姞鐏垫椿鍜屽己澶с€?/p>

绗笁绔?JSX楂樼骇鐗规€х殑鎺㈢储涔嬫梾

3.1 JSX缁勪欢鐨勫ゥ绉樹笌搴旂敤

鍦≧eact涓紝缁勪欢鏄竴绉嶉伒寰壒瀹氱粨鏋勭殑JSX鍑芥暟銆備緥濡傦紝涓€涓畝鍗曠殑闂€欑粍浠跺拰涓€涓鍣ㄧ粍浠剁殑瀹氫箟鍜屼娇鐢ㄦ柟寮忓涓嬶細

```javascript

function Greeting({ name }) {

return

Hello, {name}!;

;

}

function Container() {

return

...
; // 鍐呴儴鍙兘鍖呭惈澶氫釜缁勪欢鍜屽叾浠栧唴瀹?/p>

}

---

4.2 浣跨敤JSX鎵撻€犵偒閰风晫闈?/p>

璁╂垜浠潵鍒涘缓涓€涓猅odo搴旂敤鐨勫舰寮忕晫闈€傛兂璞′竴涓嬶紝鐢ㄦ埛鑳藉杞绘澗鍦拌繘琛屽緟鍔炰簨椤圭殑娣诲姞銆佸畬鎴愬拰鍒犻櫎鎿嶄綔銆?/p>

`TodoForm`缁勪欢锛岀畝娲佽€岀洿瑙傦細

```jsx

function TodoForm(props) {

return (

// 鐢ㄦ埛鍦ㄧ偣鍑诲悗锛屽皢鍚姩娣诲姞寰呭姙浜嬮」鐨勬祦绋嬨€?/p>

);

}

```

鍐嶆潵鐪媊TodoList`缁勪欢锛屽畠鍔ㄦ€佸湴灞曠ず鎵€鏈夌殑寰呭姙浜嬮」锛?/p>

```jsx

function TodoList(props) {

return (

    {props.todos.map(todo => (

  • // 浣跨敤鐙壒鐨処D浣滀负姣忎釜鍒楄〃椤圭殑key锛岀‘淇漅eact鑳藉楂樻晥鏇存柊鐣岄潰銆?/li>

    {todo.text} // 鏄剧ず寰呭姙浜嬮」鐨勫唴瀹广€?/p>

    // 瀹屾垚寰呭姙浜嬮」銆?/p>

    // 鍒犻櫎寰呭姙浜嬮」銆?/p>

    ))}

    );

    }

    ```

    4.3 鏁版嵁浜や簰涓庝簨浠跺鐞嗚繘闃?/p>

    鎺ヤ笅鏉ワ紝鎴戜滑灏嗘瀯寤轰竴涓洿瀹屾暣鐨凾odo搴旂敤锛屽姞鍏ユ暟鎹氦浜掑拰浜嬩欢澶勭悊鍔熻兘銆傛垜浠皢浣跨敤React鐨勭姸鎬佺鐞嗗姛鑳芥潵瀹炵幇杩欎簺鍔熻兘銆?/p>

    `TodoApp`缁勪欢缁ф壙鑷猔React.Component`锛屽畠鎷ユ湁绠$悊寰呭姙浜嬮」鐨勭姸鎬佸拰鏂规硶锛?/p>

    ```jsx

    class TodoApp extends React.Component {

    constructor(props) {

    super(props); // 璋冪敤鐖剁被鐨勬瀯閫犲嚱鏁般€傚垵濮嬪寲缁勪欢鐨勭姸鎬侊紝鍖呮嫭寰呭姙浜嬮」鍒楄〃鍜岃緭鍏ユ鐨勫€笺€?/p>

    6.2 娣卞叆鎺㈢储杩涢樁瀛︿範璧勬簮

    闅忕潃浣犲React鐨勯€愭笎娣卞叆锛岄櫎浜嗗熀纭€璇硶涔嬪锛屼綘鏇存繁鍏ュ湴浜嗚В浜嗙粍浠堕棿鐨勯€氫俊涓庣姸鎬佺鐞嗕互鍙奐SX鐨勫疄闄呭簲鐢ㄣ€傞偅涔堬紝瀵逛簬杩涢樁瀛︿範璧勬簮锛屾垜鏈変互涓嬫帹鑽愶細

    鍦ㄧ嚎璇剧▼鎺ㄨ崘锛氭厱璇剧綉涓婄殑React瀛︿範璧勬簮涓板瘜澶氭牱锛屼粠鍩虹鍒拌繘闃舵暀绋嬩竴搴斾勘鍏紝瀹冧滑灏嗗府鍔╀綘绯荤粺鍦版繁鍖栫悊瑙c€傛瘡涓€涓暀绋嬮兘鏄疄鎴樺鍚戯紝涓轰綘鐨勫涔犱箣璺娣诲姩鍔涖€?/p>

    瀹樻柟鏂囨。涓庢妧鏈崥瀹細React瀹樼綉鏄幏鍙栨渶鏂版妧鏈俊鎭拰缁嗚妭鐨勬渶浣冲満鎵€銆傜浉鍏虫妧鏈崥瀹㈡彁渚涗簡浼楀涓撳鐨勬繁鍏ュ垎鏋愬拰鏈€浣冲疄璺碉紝杩欎簺璧勬簮鏃犵枒浼氭垚涓轰綘瀛︿範鍜屽弬鑰冪殑瀹濆簱銆?/p>

    6.3 鎺ヤ笅鏉ュ浣曟洿涓婁竴灞傛ゼ

    浣犲凡缁忔帉鎻′簡React鐨勫熀纭€鐭ヨ瘑锛岄偅涔堜笅涓€姝ョ殑瀛︿範璁″垝涓庡缓璁槸浠€涔堝憿锛?/p>

    瀛︿範Hooks锛歊eact Hooks灏嗗府鍔╀綘鏇存湁鏁堝湴绠$悊鐘舵€佸拰鍓綔鐢紝涓轰綘鐨勫紑鍙戝鏉傛暟瀛楀簲鐢ㄧ殑鑳藉姏鍔犳寔銆備簡瑙e浣曚娇鐢╱seState銆乽seEffect绛塇ooks锛屽皢澶уぇ鎻愬崌浣犵殑寮€鍙戞晥鐜囧拰浠g爜璐ㄩ噺銆?/p>

    鎬ц兘浼樺寲锛氫负浜嗘瀯寤洪珮鏁堛€佹祦鐣呯殑React搴旂敤锛屼簡瑙e浣曡繘琛屾€ц兘浼樺寲鑷冲叧閲嶈銆備粠鏈嶅姟鍣ㄧ娓叉煋鍒版噿鍔犺浇绛夋妧鏈紝鎺屾彙杩欎簺鎶€宸у皢浣夸綘鐨勫簲鐢ㄦ洿鍔犱紭绉€銆?/p>

    瀹炴垬椤圭洰锛氱湡姝g殑杩涙鏉ヨ嚜浜庡疄璺点€傚弬涓庢垨鍒涘缓鏇村鐨凴eact椤圭洰锛屽皢鎵€瀛︾煡璇嗗簲鐢ㄥ埌瀹為檯鍦烘櫙涓紝绉疮瀹炴垬缁忛獙锛岃浣犵殑鎶€鑳芥洿涓婁竴灞傛ゼ銆?/p>

    鎸佺画瀛︿範鍜屽疄璺碉紝浣犲皢鏇村姞鐔熺粌鍦拌繍鐢↗SX鍜孯eact鏋勫缓楂樻晥銆佸姩鎬佺殑Web搴旂敤锛屽紑鍚綘鐨勫墠绔紑鍙戣€呬箣鏃咃紒

  • 文章从网络整理,文章内容不代表本站观点,转账请注明【蓑衣网】

    本文链接:https://www.baoguzi.com/68620.html

    掌握JSX语法:项目实战带你从入门到上手 | 分享给朋友: