构建一个字符串并将其用作html对象：未捕获的错误：对象作为React子元素无效

问题描述

我正在尝试构建一个React应用。我有一个下拉菜单组件，其中每个项目都是数组的组合。这是我的代码：

class PlotCardMenu extends React.Component {
  renderMenuItems(m) {
    let indices = Array(m)
      .fill(0)
      .map((v,i) => i);
    let it = new Combination(indices,3);
    let menuItems = [];
    for (let i = 0; i < it.length; i++) {
      let item = "[" + it
        .nth(i)
        .map((e) => "f<sub>" + e + "</sub>")
        .join(",") + "]";
      console.log(item); // for sanity check
      menuItems.push(<CDropdownItem key={i}>{item}</CDropdownItem>);
    }
    return menuItems;
  }

  render() {
    return <CDropdownMenu>{this.renderMenuItems(4)}</CDropdownMenu>;
  }
}

现在，如果我查看该组件，则无法获取html。我希望每个项目看起来像这样：[f_0,f_1,f_2]，其中f_0表示f-subscript-0等。

所以我做了一些谷歌搜索，发现我需要将字符串转换为html对象。所以我这样尝试：

renderMenuItems(m) {
    let indices = Array(m)
      .fill(0)
      .map((v,3);
    let menuItems = [];
    let parser = new DOMParser();
    for (let i = 0; i < it.length; i++) {
      let item = "[" + it
        .nth(i)
        .map((e) => "f<sub>" + e + "</sub>")
        .join(",") + "]";
      console.log(item);
      let doc = parser.parseFromString(item,"text/html");
      menuItems.push(<CDropdownItem key={i}>{doc}</CDropdownItem>);
    }
    return menuItems;
  }

我收到此错误：

未捕获的错误：对象作为React子对象无效（找到：[object HTMLDocument]）。如果要渲染子级集合，请改用数组。

我该如何解决？

请注意：CDropdownItem和CDropdownMenu来自coreui-react，而Combination来自js-combinatorics。

解决方法

实际上，您正在发送一个字符串数组，这就是为什么它将数组呈现为字符串的原因，所以不要尝试将字符串转换为HTML Object。您必须发送Array代替字符串：

class PlotCardMenu extends React.Component {
renderMenuItems(m) {
    let indices = Array(m)
        .fill(0)
        .map((v,i) => i);
    let it = new Combination(indices,3);
    let menuItems = [];
    for (let i = 0; i < it.length; i++) {
        let item = it
            .nth(i)
            .map((e) => (<span>f<sub>{e}</sub></span>))
        console.log(item); // for sanity check
        menuItems.push(<CDropdownItem key={i}>{item}</CDropdownItem>);
    }
    return menuItems;
}

render() {
    return <CDropdownMenu>{this.renderMenuItems(4)}</CDropdownMenu>;
}
 }

我认为它将解决您的问题。