如何在 reactjs 中实现 react-widgets 下拉列表

Question

我正在尝试在我的 reactjs 项目中添加下拉列表。我的数据来自 api，看起来像这样。

在下拉列表中，我必须在下拉列表中显示 colours 和 sizeType。

我试过这样做，但没有用。

  const data = [props.data];
  return (
    <Grid xs={12} className="sort" container>
      <DropdownList
        style={{ height: "auto" }}
        placeholder={props.title}
        className="drop-down"
        data={data}
      />
    </Grid>

Answer 1

首先你应该把你的颜色字符串拆分成数组

const colorsArray = data.colors.split(',');

然后像数据属性一样传递它

  return (
    <Grid xs={12} className="sort" container>
      <DropdownList
        style={{ height: "auto" }}
        placeholder={props.title}
        className="drop-down"
        data={colorsArray}
      />
    </Grid>

Answer 2

如果我们假设您提供的 props.data 是您从 API 收到的实际数据。

解构我们的实际数据

由于实际数据是对象本身，我们可以像这样访问其中的 colours 和 sizeType 属性：

const colours = data.colours;
const sizeType = data.sizeType;

制作我们的解构数据数组

由于 colours 和 sizeType 本身是字符串，我们应该将它们组成一个数组以将其作为数据传递给 DropdownList，因此我们可以按如下方式进行：

const coloursArray = data.colours.split(',');
const sizeTypeArray = data.sizeType.split(',');

注意： 请记住每个数组都有其唯一的索引，因此我们不必自己创建唯一的 id，DropdownList 将使用它作为它是用于区分的唯一 id，但是为了使用最佳实践，我们应该使用 UUID 为每个下拉菜单和数据提供唯一的 id，以使区分更加清晰。有关UUID的更多信息，您可以阅读this post。

注意 2： 由于我们想要的字符串属性与 , 分开，我们可以简单地使用逗号作为 split 函数输入。您可以阅读有关拆分功能的更多信息 here.

最终输出

所以这将是您为组件提供的最终 return：

return (
    <Grid xs={12} className="sort" container>
      <DropdownList
        style={{ height: "auto" }}
        placeholder={props.title} //Title for colours dropdown
        className="drop-down"
        data={coloursArray}
      />
    </Grid>
    <Grid xs={12} className="sort" container>
      <DropdownList
        style={{ height: "auto" }}
        placeholder={props.title} //Title for colours dropdown
        className="drop-down"
        data={sizeTypeArray}
      />
    </Grid>
)

如何在 reactjs 中实现 react-widgets 下拉列表

How to implement react-widgets dropdownlist in reactjs

javascript

reactjs

react-widgets

解构我们的实际数据

制作我们的解构数据数组

最终输出