在專案中的src資料夾下新建乙個components資料夾,用來存放自己寫的元件檔案,此處照書上敲了個登入元件,取名為login.js。
import react from 'react'
export class login extends react.component
}login()
check()
render();
var hstyle=;
var pstyle=;
var userstyle=;
var pwdstyle=;
var buttonstyle=;
return(
登入 )}
}
import from '../src/components/login'; //這一句是引入我們編寫的元件
storiesof('login',module)
.add('login',()=>(
));
大功告成,接下來npm run storybook
就可以看到效果了
在這裡要說一下第二步引入元件的時候,如果是這麼寫的:
storiesof('button', module)
.add('with text', () => ( // 乙個 add 表示新增乙個 story
hello button
)).add('with some emoji', () => ( // 這裡是另乙個 story
? ? ? ?
))storiesof('login',module)
.add('login',()=>(
));
如果是這麼寫的:
storiesof('button', module)
.add('with text', () => ( // 乙個 add 表示新增乙個 story
hello button
)).add('with some emoji', () => ( // 這裡是另乙個 story
? ? ? ?
)).add('login',()=>(
));
效果就是這樣子的:
看出兩者的區別了嗎?
React中的Context怎麼用
今天在學習styled components的theming時,關於styled components對主題的實現與管理上提到,主要應用到了react的context api,所以好好研讀了一下官方文件,對該api做了如下記錄。當我們使用react時,很容易的通過觀察元件的props來跟蹤元件間的資...
好像有點用的react知識
react 負責邏輯控制,react.createelement 將頁面渲染成樹形模板 reactdom 渲染器,渲染成瀏覽器可識別的dom 在dom元素中使用 函式式 function component props 類寫法 class comp extends react.component 此...
用React 高階元件編寫登入
高階元件 高階元件是引數為元件,返回值為新元件的函式。元件是將 props 轉換為 ui,而高階元件是將元件轉換為另乙個元件 const enhancedcomponent higherordercomponent 所有的onchange應該被抽取出來,然後共享 抽取login和register 1...