javascript - 如何在 React 中制作下拉菜单

Question

如何使用 React 和 storybook 制作一个下拉菜单，其中将有多个从数组生成的下拉菜单，并且其中可以有多个元素

我无法弄清楚如何正确制作下拉菜单，如果我通过地图生成它们，那么它们会同时打开，因为它们有一个状态，但我不明白如何使它们成为不同的状态

现在我有这个代码

export const Staff = ({ title, titleS, titleT, titleF, pos, name, text, post, date, onClick,  ...props }) => {
    const [active, setActive] = useState(false);
    const [activeS, setActiveS] = useState(false);

    const show = () => {
        setActiveS(!activeS)
    }

    return (
       <>
           <div className={['dropdown', active ? 'dropdown--active' : ''].join(' ')}>
               <div className="dropdown__header" onClick={()=> {setActive(!active)} } >
                   <h5>{title}</h5>
               </div>
               <div className="dropdown__body">
                           <>
                                       <>
                                          <div className='task' onClick={show}>
                                              <Icon icon="bi:arrow-right-short" className={['dropdownBodyActive__prev', activeS ? 'dropdownBodyActive__icon': 'dropdownBodyActive__prev'].join(' ')} />
                                              {pos.map((item) => {
                                                  return (
                                                    <>
                                                        <div className="task__content">
                                                            <h4 className="task__name" >{item.name}</h4>
                                                            <h4 className="task__meeting">
                                                            </h4>
                                                        </div>
                                                        <div className='task__date'>
                                                            {item.text}
                                                            <i className='uil uil-ellipsis-h'></i>
                                                        </div></>
                                                                                                      )
                                              })}

                                          </div>

                                           {post.map((item) => {
                                               return (
                                                   <div className={['position', activeS ? 'dropdownBodyActive': 'dropdownBody'].join(' ')}>
                                                       <div className="position__content">
                                                           <ReactSVG src={VecIcon} className='position__icon'/>
                                                           <h4 className="position__name" >{item.name}</h4>
                                                           <h4 className="position__meeting">
                                                               {/*<span>New</span>*/}
                                                           </h4>
                                                           <i className='uil uil-ellipsis-h position__dot'></i>
                                                           <div className='position__date'>
                                                               {item.text}
                                                           </div>
                                                       </div>

                                                   </div>
                                               )
                                           })}

                                       </>


                           </>

               </div>
           </div>

       </>

    );
};



Staff.propTypes = {
    title: PropTypes.string,
    onClick: PropTypes.func,
    text:PropTypes.string,
    date: PropTypes.object,
    pos: PropTypes.arrayOf(
        PropTypes.shape({
            text: PropTypes.string,
            name: PropTypes.string,
        })
    ),
    post: PropTypes.arrayOf(
        PropTypes.shape({
            name: PropTypes.string
        })
    ),
};

Staff.defaultProps = {
    title: '',
    pos: [],
    post: []

}; 

和故事

const Template = (args) => <div style={{maxWidth: "1220px"}}>
    <Staff {...args}
            text='Jankov'
    >

    <Item

    />




</Staff>


    <StaffS {...args}

            >

        <Item    />
        <Item    />

    </StaffS>

    <StaffT {...args} >

        <Item    />
        <Item    />

    </StaffT>

    <StaffF {...args} >

        <Item  />
        <Item   />

    </StaffF>


</div>;

export const Normal = Template.bind({});
Normal.args = {
    title: 'HEADQUARTERS',
    titleS: 'Design',
    titleT: 'Marketing',
    titleF: 'PR/Backoffice',
    date: {
    text: "2 Branch Office",


},


    pos: [
        {
            name: 'Development',
            text: ''
        },
        {
            name: 'České Budějovice',
            text: '2 Branch Office',

        },
    ],

    post: [
        {
            name: 'Jankov',
            text: '',


        },
        {
            name: 'České Budějovice',
            text: '2 Branch Office',

        },
        {
            name: 'Jankov',
            text: '',

        }
    ]
};

这就是我的结果

这就是我需要的

标签： javascriptreactjsstorybookreact-proptypes