接下來我們要開始建立基本的組件,其中包含:
在開始設計組件之前,建議先定義好參數再開始設計會比較好,如此一來才可以避免 props 開始發散。
基本參數如下:
Button.propTypes = {
text: propTypes.string,
onClick: propTypes.func,
}
Button.defaultProps = {
text: '',
onClick: () => false
}
樣式的部分,使用 styled-jss:
const StyledInput = styled('input')((theme) => ({
padding: `${theme.getSpacing(5)}px ${theme.getSpacing(1)}px`,
backgroundColor: theme.colors.primary,
borderRadius: theme.radius
}));
const Button = props => {
const { text, onClick } = props;
return (
<StyledInput type='button' style={styles.button} value={text} onClick={onClick} />
)
}
建立了第一個依照我們樣式產生的組件。
Mac 的容量竟然爆了連 yarn 都不行,這個故事告訴我們,工欲善其事,必先利其器...。