被破坏的组件破坏动画React的JS控制CSS 总体结构

问题描述

我想制作一个具有几个动画的select元素：单击select元素时，选项将从第一个元素下方移出。单击选项后，所有选项都会折叠到顶部。

事实证明这是不可能完成的任务。无论出于何种原因，React都认为处理CSS更新的最好方法是删除整个select元素，然后构建一个新元素！

我尝试对每个元素使用键。我试着删除情感js，仅使用普通的普通stlye对象。我尝试将每个组件都提取到一个新文件中，并尝试对整个所选内容进行内联（有效地工作了一半）。我唯一不能删除的是onClick，它设置了被单击组件的状态。

我不知道如何运行它。我想在不使用动画框架的情况下做到这一点

总体结构


const [selectState,select@R_502_6422@patch] = useReducer();

const Option = () => {
  const style = {
    opacity : selectState.selectIsOpen ? '1' : '0',}
  return <option style={style} />
}

<Select>
  <Option onClick(select@R_502_6422@patch("art"))>Draw!</Option>
  ...

更新：问题是差异算法无法重用<Option>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

emotion javascript reactjs reactjs