无涯教程网

Reactjs 如何在 reactselect v2 中创建 optgroup

发布于09月26日

我想在我的react select列表中包含OptGroup，但似乎在任何地方都没有文档记录.我从https://github.com/JedWatson/react-select/issues/59年的一篇 comments 中得出以下 struct :

render() {
  const options = [
    {
      label: "Group 1",
      children: [
        { label: "Group 1, option 1", value: "value_1" },
        { label: "Group 1, option 2", value: "value_2" }
      ]
    },
    { label: "A root option", value: "value_3" },
    { label: "Another root option", value: "value_4" }
  ];
  return <Select options={options} />
}

我希望"第一组"是一个选项组，选项1和选项2都是子元素.相反，"第一组"只是作为常规选项出现.有人知道在"组1"中，将其转换为optgroup的正确键是什么吗？

我已经try 过" children "和"价值观"，但没有效果.

推荐答案

options是一把神奇的 keys :

render() {
  const options = [
    {
      label: "Group 1",
      options: [
        { label: "Group 1, option 1", value: "value_1" },
        { label: "Group 1, option 2", value: "value_2" }
      ]
    },
    { label: "A root option", value: "value_3" },
    { label: "Another root option", value: "value_4" }
  ];
  return <Select options={options} />
}

这就是我所期待的.

Reactjs相关问答推荐

运行 node server.js会导致以下错误：Route.post()需要回调函数，但在Route.&处得到了[对象Undefined] lt;计算>

滚动事件监听器在Next.js客户端组件中不触发

通过单击具有此值的按钮将值添加到数组对象键

更改购物车中的产品数量后，PayPal Reaction/Next JS按钮未更新

Reaction-Query&-使用Mutation触发成功，而应该触发错误

如何使图像zoom 并移动到点击点

同一文件中前端和后端的Nginx配置

使用 React + Vite 范围化 CSS

console.logs 没有显示在浏览器控制台上，但显示在我的终端上

如何隐藏移动导航栏后面的向下滚动图标和文本？

Syncfusion：带有 TabItemsDirective 的选项卡组件不显示任何内容

这个简单的React组件为什么会多次渲染？

VideoSDK api 不使用更新状态

React + Redux：数据未正确传递给具有动态路由的组件

Formik onChange() 字段挂钩覆盖显示值和 Select 机制

意外的标记.您可能需要一个合适的加载器来处理这种文件类型.书？.img？ /#PURE/React.createElement("img",

ReactJS：useMemo 钩子修复了我的无限重新渲染问题而不是 useEffect

如何使用react 路由将 url 参数限制为一组特定的值？

Select MenuItem 时 Material-ui 不更改样式

React 似乎在触发另一个组件时重新渲染了错误的组件

实用课程推荐

相关教程推荐