Storybook Reactjs 的复合组件

Question

尝试编写一个简单的复合组件 - 一个包含 option 个组件数组的 select 组件，但失败了并且不确定问题出在哪里。

（我使用 https://storybook.js.org/tutorials/intro-to-storybook/react/en/composite-component/ 作为起点）

Select 组件


import Option from "./Option";

export default function Select({ options, label, elementID, size, disabled }) {
    return (
        <div className="form-group">
            <label htmlFor={elementID}>{label}</label>
            <select className={`form-control ${size}`} id={elementID} disabled={disabled ? disabled : false}>
                {options.map(option => (
                    <Option key={option.value}>{option.label}</Option>
                ))}
            </select>
        </div>
    )
}

Select.propTypes = {
    label:         PropTypes.string,
    elementID:     PropTypes.string,
    size:          PropTypes.oneOf(["", "form-control-sm", "form-control-lg"]),
    disabled:      PropTypes.bool,
    options:       PropTypes.array,
}

Select.stories

import React from 'react';

import Select from "../components/Select";
import * as OptionStories from "./Option.stories";

export default {
    title: "Forms/Select",
    component: Select,
}

const Template = args => <Select {...args} />;

export const Default = Template.bind({});
Default.args = {
    label: "Select Label",
    elementID: "selectID",
    options: [
        { ...OptionStories.default.args.option, value: '1', label: 'Test'},
    ],
}

选项组件

import PropTypes from "prop-types"

function Option({ label, value, disabled }) {
    return (
        <option value={value} disabled={disabled ? disabled : false}>{label}</option>
    )
}

Option.propTypes = {
    label:         PropTypes.string,
    value:         PropTypes.string,
    disabled:      PropTypes.bool,
}

export default Option

Option.stories

import Option from "../components/Option"

export default {
    title: "Option",
    component: Option,
}

const Template = args => <Option {...args} />

export const Basic = Template.bind({})
Basic.args = {
    option: {
        value: "0",
        label: "Select Label",
    },
}

Answer 1

多亏了https://www.robinwieruch.de/react-list-component/

我弄明白了

任何感兴趣的人都不需要 option 组件和故事。

在 select 组件中，我将 return 更改为

                {options.map(item => {
                    return <option value={item.value}>{item.label}</option>
                })}

并且在 select.story

options: [
        {
            value: 'a',
            label: 'First Option'
        },
    ],

Storybook Reactjs 的复合组件

Compound Component for Storybook Reactjs

reactjs

storybook