Question

我正在使用以create-react-app开头的webApp。它实现了redux，并通过axios调用加载了动态数据。我需要有关可定制的DualList框组件的建议，该组件支持自定义项目组件和事件处理程序。

我已经尝试过react-dual-listbox，但是它不支持自定义选定的Item组件。

Answer 1

它不允许为所选项目自定义所选组件，因为它不能！该列表在html / react jsx

中看起来像这样

<select multiple>
  <option value="banana">Banana</option>
  <option value="apple">Apple</option>
  <option value="orange">Orange</option>
  <option value="pinapple">Pinapple</option>
</select>

有很多选项，但是您可以先使用div和按钮创建自己的列表实现，并跟踪用户单击了哪个元素并应用不同的样式来表示其处于活动状态。

const { activeElement } = this.state;

<List>
  <ListItem isActive={activeElement === 'banana'} icon="banana">Banana</ListItem>
  <ListItem isActive={activeElement === 'apple'} icon="apple">Apple</ListItem>
  <ListItem isActive={activeElement === 'orange'} icon="orange">Orange</ListItem>
  <ListItem isActive={activeElement === 'pineapple'} icon={<SomeSvgIconThatLooksLikePineapple />}>Pineapple</ListItem>
</List>

此示例也未添加clickHandlers。这需要一些努力，但并不难实现。就您而言，我想您是从redux获取数据的列表，因此您可以映射结果并应用与您的类型相匹配的其他ListItem组件。

需要关于可定制的dualList react组件的建议

1 个答案: