React中jsx呼叫js例子

2022-01-31 19:27:08 字數 512 閱讀 3189

需求:

介面新增乙個「匯入專案」按鈕,點選該按鈕可以執行專案匯入功能。按鈕點選事件部分是jsx語法**,而專案匯入部分是封裝的js語法**,假設此處用alert("123")代替。若點選按鈕出現alert("123")彈框,表示onclick事件執行了js語法**。

具體示例如下:

專案匯入部分importproject.js檔案:

export const impp =

};

jsx裡引入js檔案部分:

import  from'

./importproject.js

';

jsx裡按鈕點選事件部分:

render() >匯入專案

); }

效果圖:

點選「匯入專案」按鈕,即可觸發importproject.js中的函式:

React中Jsx的介紹

優點 jsx執行更快 型別更安全,編譯過程如果出錯就不能編譯 jsx編寫模板更加簡單快速 jsx表示式 由html元素構成 中間如果需要插入變數用 中間可以使用表示式 中間表示式中可以使用jsx物件 屬性和html內容一樣都是用 來插入內容 jsx樣式 1.class中不可以存在多個class屬性 ...

對REACT中JSX標籤的誤解

function welcome props const element reactdom.render element,document.getelementbyid root 在 codepen 上嘗試讓我們來回顧一下這個例子中發生了什麼 我們呼叫reactdom.render 函式,並傳入作為...

用於react 中的JSX語法配置方法

什麼是jsx語法 就是符合 xml 規範的 js 語法 語法格式相對來說,要比html嚴謹很多 1.如何啟用 jsx 語法?安裝能夠識別轉換jsx語法的包,就是將jsx轉化為js babel preset react 新增.babelrc配置檔案 新增babel loader配置項 module j...