首页 > 解决方案 > 带有选项的 Reactjs 动态 optgroup

问题描述

我正在尝试映射一个数组并使用 optgroups 和它的 opts 创建一个选择。但是下面的代码只会输出 optgroup;

<select name="clients">
  {this.props.clients &&
    this.props.clients.length > 0 &&
    this.props.clients.map((e, key) => {
      return (
        <optgroup key={key} label={e.name}>
          {e.projects.map((project, projectKey) => {
            <option key={projectKey} value={project.id}>
              {project.name}
            </option>;
          })}
        </optgroup>
      );
    })}
</select>

任何想法我也可以获得选项输出?

标签: javascriptreactjsselectoptgroup

解决方案


你的内部map()函数没有返回任何对象。在您的元素return之前添加。<option>

<select name="clients">
    {this.props.clients && this.props.clients.length > 0 && this.props.clients.map((e, key) => {
        return <optgroup key={key} label={e.name}>
            {e.projects.map((project,projectKey) => {
                return <option key={projectKey} value={project.id}>{project.name}</option>
            })}
        </optgroup>;
    })}
</select>

推荐阅读