Build a string and use it as an html object: Uncaught Error: Objects are not valid as a React child

Question

我正在尝试构建一个 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, i) => i);
    let it = new Combination(indices, 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;
  }

我收到了这个错误：

Uncaught Error: Objects are not valid as a React child (found: [object HTMLDocument]). If you meant to render a collection of children, use an array instead.

如何解决？

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

Answer 1

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

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>;
}
 }

我想它会解决你的问题。

Build a string and use it as an html object: Uncaught Error: Objects are not valid as a React child

Build a string and use it as an html object: Uncaught Error: Objects are not valid as a React child

javascript

reactjs

core-ui