React용 스토리북 — Args
4276 단어 reactprogrammingjavascriptwebdev
이 기사에서는 Storybook에서 args를 사용하는 방법을 살펴보겠습니다.
인수 개체
args 객체를 사용하면 구성 요소에 전달할 인수를 전달하여 변경할 수 있습니다.
스토리 및 구성 요소 수준에서 전달할 수 있습니다.
Args는 문자열 키가 있는 객체입니다.
스토리 인수
다음과 같이 작성하여 스토리에 인수를 추가할 수 있습니다.
src/stories/button.css
.button {
font-weight: 700;
border: 0;
border-radius: 3em;
cursor: pointer;
display: inline-block;
line-height: 1;
}
.button-primary {
color: white;
background-color: #1ea7fd;
}
.button-secondary {
color: #333;
background-color: transparent;
}
.button-small {
font-size: 12px;
padding: 10px;
}
.button-medium {
font-size: 14px;
padding: 11px;
}
.button-large {
font-size: 16px;
padding: 12px;
}
src/stories/Button.js
import React from 'react';
import PropTypes from 'prop-types';
import './button.css';
export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
const mode = primary ? 'button-primary' : 'button-secondary';
return (
<button
type="button"
className={['button', `button-${size}`, mode].join(' ')}
style={backgroundColor && { backgroundColor }}
{...props}
>
{label}
</button>
);
};
Button.propTypes = {
primary: PropTypes.bool,
backgroundColor: PropTypes.string,
size: PropTypes.oneOf(['small', 'medium', 'large']),
label: PropTypes.string.isRequired,
onClick: PropTypes.func,
};
Button.defaultProps = {
backgroundColor: null,
primary: false,
size: 'medium',
onClick: undefined,
};
src/stories/Button.stories.js
import React from 'react';
import { Button } from './Button';
export default {
title: 'Example/Button',
component: Button,
argTypes: {
backgroundColor: { control: 'color' },
},
};
const Template = (args) => <Button {...args} />;
export const Primary = Template.bind({});
Primary.args = {
primary: true,
label: 'Button',
};
export const Secondary = Template.bind({});
Secondary.args = {
label: 'Button',
};
export const Large = Template.bind({});
Large.args = {
size: 'large',
label: 'Button',
};
export const Small = Template.bind({});
Small.args = {
size: 'small',
label: 'Button',
};
Template
함수를 생성하여 원하는 소품으로 Button
를 렌더링합니다.그런 다음 반환된 객체에
Template.bind
속성을 설정할 수 있도록 args
를 호출합니다.이런 식으로 props의 기본값을 설정할 수 있습니다.
서로 다른 args 객체를 병합할 수 있습니다.
예를 들어 다음과 같이 작성할 수 있습니다.
src/stories/Button.stories.js
import React from 'react';
import { Button } from './Button';
export default {
title: 'Example/Button',
component: Button,
argTypes: {
backgroundColor: { control: 'color' },
},
};
const Template = (args) => <Button {...args} />;
export const Primary = Template.bind({});
Primary.args = {
primary: true,
label: 'Button',
};
export const PrimaryLongName = Template.bind({});
PrimaryLongName.args = {
...Primary.args,
label: 'Primary button long name',
}
재사용할 수 있도록
Primary
개체의 인수를 PrimaryLongName
개체로 병합했습니다.구성 요소 인수
컴포넌트에 args를 정의할 수 있습니다.
예를 들어 다음과 같이 작성할 수 있습니다.
src/stories/Button.stories.js
import React from 'react';
import { Button } from './Button';
export default {
title: 'Example/Button',
component: Button,
argTypes: {
backgroundColor: { control: 'color' },
},
args: {
primary: true,
},
};
스토리의 모든 버튼에서
primary
소품을 true
로 설정했습니다.결론
테스트를 위해 React 구성 요소에 다른 소품을 전달하도록 스토리에 인수를 설정할 수 있습니다.
Reference
이 문제에 관하여(React용 스토리북 — Args), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/aumayeung/storybook-for-react-args-553h텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)