React Academy · Pelajaran

Args, Kawalan & Tambahan Actions

Gunakan args untuk menjadikan cerita interaktif dan tambahan actions untuk mencatat peristiwa komponen.

Pelajaran 3 daripada 413 langkah

Args, Kawalan & Tambahan Actions ialah pelajaran React Academy percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran React Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus React Academy merangkumi sejumlah 4 pelajaran.

Apakah Argumen?

Argumen ialah masukan (prop) kepada sesuatu cerita. Storybook menggunakan objek args untuk memaparkan komponen dan menggerakkan panel Kawalan — penyunting prop langsung dalam antara muka Storybook.

Menentukan Argumen

Tetapkan argumen dalam objek cerita. Storybook membuat kesimpulan jenis kawalan daripada jenis prop TypeScript.

export const Primary: Story = {
  args: {
    label: 'Click me',
    variant: 'primary',
    size: 'medium',
    disabled: false,
  },
};

Panel Kawalan

Apabila argumen ditentukan, Storybook memaparkan kawalan interaktif dalam panel Controls di bawah kanvas. Menukar kawalan memaparkan semula cerita dengan prop baharu — tiada perubahan kod diperlukan.

ArgTypes untuk Penyesuaian Kawalan

Gunakan argTypes dalam meta untuk menyesuaikan cara prop muncul dalam Kawalan: jenis, pilihan, perihalan dan nilai lalai.

const meta: Meta<typeof Button> = {
  component: Button,
  argTypes: {
    variant: {
      control: 'select',
      options: ['primary', 'secondary', 'danger'],
      description: 'Visual style of the button',
    },
    size: {
      control: { type: 'radio' },
      options: ['small', 'medium', 'large'],
    },
    disabled: { control: 'boolean' },
    label: { control: 'text' },
  },
};

Menyembunyikan Argumen daripada Kawalan

Tetapkan control: false dalam argTypes untuk menyembunyikan prop daripada panel Kawalan — berguna untuk prop dalaman atau fungsi.

argTypes: {
  onClick: { control: false },
  className: { table: { disable: true } },
},

Tambahan Tindakan

Tambahan Actions (sebahagian daripada addon-essentials) merekod panggilan fungsi prop dalam panel Actions. Gunakan fn() daripada @storybook/test untuk mencipta fungsi perisik yang dipaparkan dalam panel.

import { fn } from '@storybook/test';

const meta: Meta<typeof Button> = {
  component: Button,
  args: {
    onClick: fn(),     // click events appear in Actions panel
    onHover: fn(),
  },
};

Pendawaian Automatik Tindakan dengan argTypes

Gunakan argTypes: { onClick: { action: 'clicked' } } untuk mencipta pengendali tindakan secara automatik tanpa mengimport fn().

const meta: Meta<typeof Select> = {
  component: Select,
  argTypes: {
    onChange: { action: 'changed' },
    onBlur: { action: 'blurred' },
  },
};

Argumen Global

Tetapkan argumen dalam preview.ts untuk menggunakannya pada semua cerita secara global — berguna untuk tema, tempat atau argumen ruang pandang yang mempengaruhi setiap komponen.

// .storybook/preview.ts
export const globalTypes = {
  locale: {
    description: 'Internationalization locale',
    defaultValue: 'en',
    toolbar: {
      icon: 'globe',
      items: ['en', 'fr', 'de'],
    },
  },
};

Bar Alat Storybook

Argumen global dengan konfigurasi toolbar muncul sebagai butang dalam bar alat Storybook, membolehkan anda menukar tema, tempat atau titik henti secara global.

Penggubahan Argumen

Gabungkan argumen daripada cerita lain untuk membinanya di atas cerita tersebut. Ini mengurangkan penduaan semasa mencipta cerita varian.

export const Primary: Story = {
  args: { label: 'Save', variant: 'primary' },
};

export const PrimaryLoading: Story = {
  args: { ...Primary.args, loading: true },
};

export const PrimaryDisabled: Story = {
  args: { ...Primary.args, disabled: true },
};

Memetakan Nilai Kawalan

Gunakan mapping dalam argTypes untuk memetakan pilihan kawalan yang mudah difahami manusia kepada nilai prop sebenar, contohnya ikon atau komponen.

argTypes: {
  icon: {
    options: ['Star', 'Heart', 'None'],
    mapping: { Star: <StarIcon />, Heart: <HeartIcon />, None: null },
    control: { type: 'select' },
  },
},

Semakan Pantas

Apakah yang dilakukan oleh fungsi fn() daripada @storybook/test apabila digunakan sebagai argumen cerita?

Jawab dalam pelajaran interaktif

Imbas Kembali

Argumen menggerakkan panel Kawalan (editor prop secara langsung) dan tambahan Actions (pencatat peristiwa). Takrifkan jenis argumen dengan argTypes untuk kawalan yang lebih kaya, gunakan fn() daripada @storybook/test untuk pencatatan tindakan, dan gabungkan argumen merentas cerita untuk mengurangkan penduaan.

Percuma untuk bermula

Pelajari React dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 88
Pelajaran: 324

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Args, Kawalan & Tambahan Actions” percuma?

Ya — teks penuh “Args, Kawalan & Tambahan Actions” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus React Academy, tingkat taraf kepada CoddyKit PRO. Kursus React Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Args, Kawalan & Tambahan Actions”?

Gunakan args untuk menjadikan cerita interaktif dan tambahan actions untuk mencatat peristiwa komponen. Anda berlatih React Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan React Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran React Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.

Berapa lamakah pelajaran “Args, Kawalan & Tambahan Actions” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran React Academy ini?

Ya. Setiap pelajaran React Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Menyediakan Storybook dalam Projek React
Menulis Cerita CSF3
Args, Kawalan & Tambahan Actions
Pengujian Storybook & Regresi Visual

← Kembali ke React Academy