//對jsx執行的理解
/**
*@param dom :document.createElement('div')
*@param name : className / style/onClick等
*@value : string:"classTest"/"color:red; font-size:13px;" /object:{height:50,color:"red"}
*/
function setAttribute(dom,name,value){
if(name === 'className') name = 'class';
if(/on\w+/.test(name)){
name = name.toLowerCse();
dom[name] = value;
}else if(name === 'style'){
if(value&&typeof value === ' object'){
for(let i of value){
dom.style[ i ] = typeof value[ i ] === 'number' ? value[ i ] + 'px' : value[ i ];
}
}else if(!typeof value === 'string'){
dom.style.cssText = value
}else if(!value){
dom.style.cssText = '';
}
}else{
if(value)dom.setAttribute( name, value );
else dom.removeAttribute(name);
}
}
複製程式碼
react理解(一)jsx
相關文章
- React中JSX的理解ReactJS
- React 新手路(一):初識 React、JSX 與 元件ReactJS元件
- React原始碼解析(一):JSX到javascriptReact原始碼JSJavaScript
- React專題:JSXReactJS
- React 基礎_JSXReactJS
- 深入理解JSXJS
- react之JSX本質ReactJS
- 假如React沒了JSXReactJS
- 藉助babel理解jsxBabelJS
- react中的jsx語法ReactJS
- React學習筆記-JSXReact筆記JS
- React與Vue模板使用比較(一、vue模板與React JSX比較)ReactVueJS
- 玩轉 React【第02期】:戀上 React 模板 JSXReactJS
- React騷操作——jsx遇到template-directiveReactJS
- 學習React,從攻克JSX開始ReactJS
- 從零開始實現React(一):JSX和虛擬DOMReactJS
- React.js 實戰之 JSX 簡介ReactJS
- jsx-control-statements - jsx的一大利器JS
- react知識(二)重寫JSX編譯原理ReactJS編譯原理
- 超級詳細的react筆記(三)jsxReact筆記JS
- 對React一些原理的理解React
- React事務的一些理解React
- React原始碼解析(1):jsx語法是如何解析React原始碼JS
- React.js中JSX的原理與關鍵實現ReactJS
- React Diff理解React
- 理解 React HooksReactHook
- JSX,瞭解一下?JS
- 程式碼簡潔之道:編寫乾淨的 React Components & JSXReactJS
- 使用 React.cloneElement 動態處理 JSX 和字串內容ReactJS字串
- jsxJS
- [譯] 理解 React HooksReactHook
- 深入理解ReactReact
- 深度理解 React SuspenseReact
- React Hooks的理解ReactHook
- React refs 的理解React
- React jsx 中寫更優雅、直觀的條件運算子ReactJS
- js && jsxJS
- [譯]理解react之setStateReact