如何解决构建一个字符串并将其用作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>;
}
}
我认为它将解决您的问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。