Component Composition

Stories में components को compose करना

आप एक story में कई components को एक साथ compose कर सकते हैं कि वे कैसे interact करते हैं। यह parent-child relationships और data flow को test करने के लिए विशेष रूप से उपयोगी है।

List component को compose करना

यहाँ बताया गया है कि List component को Item children के साथ कैसे test करें।

import { List, ListItem } from './List';

export default {
  component: List,
  title: 'Components/List',
};

export const WithItems = () => (
  <List>
    <ListItem>First item</ListItem>
    <ListItem>Second item</ListItem>
    <ListItem>Third item</ListItem>
  </List>
);

export const Empty = () => <List />;
export const Loading = () => <List loading />;

Data flow को test करना

Stories आपको test करने देते हैं कि components कैसे different data, callbacks, और state changes को handle करते हैं बिना full application चलाए।

Over-composition से बचें

Composed stories को simple और focused रखें। अगर एक story बहुत complex हो जाता है, इसे छोटे components में तोड़ दें।