Question

我需要在我的react组件中显示一个带有一些 optgroup 标签的dropdownlist元素。

所以我创建了这个方法：

 onRenderCategories: any = () => {

        var scope = "";
        var rendu = "";

        for (var scopes in this.props.categories) {
            var ensemble: Array<CategoryTemplateInfos> = this.props.categories[scopes];
            if (ensemble.length == 0) continue;
            scope = ensemble[0].scope;
            rendu += "<optgroup label=" + scope + ">";
            for (var j = 0; j < ensemble.length; j++) {
                var categorie: string = ensemble[j].label;
                var id_categorie: string = ensemble[j].id;
                rendu += "<option value=" + id_categorie+">" + categorie+"</option>";
            }
             rendu += "</optgroup>";
        }
        return rendu;
    }

此方法的输出是例外，即放在此处的html内容

 <select >
       <option value="">--Please select a category--</option>
       {this.onRenderCategories()} //here
  </select>

那没有用！

那么我该如何解决将字符串转换为HTML元素的问题？

谢谢

Answer 1

尝试一下：

onRenderCategories: any = () => {

    let scope = "";
    let items:JSX.Element[] = [];

    for (var scopes in this.props.categories) {
        let ensemble: Array<CategoryTemplateInfos> = this.props.categories[scopes];
        if (ensemble.length == 0) continue;
        scope = ensemble[0].scope;
        let options = ensemble.map(item => <option value={item.id} key={item.id}>{item.label}</option>)
        let itemstmp = <optgroup label={scope} key={scope}>{options}</optgroup>
        items.push(itemstmp);
    }
    return items;
}


<select >
       <option value="">--Please select a category--</option>
       {this.onRenderCategories()} //here
</select>

Answer 2

React不适用于HTML，它适用于JSX，乍一看它仅类似于HTML。实际上，一旦babel处理了JSX，它就是纯Javascript。

首先，您需要调用函数：{this.onRenderCategories()}-注意括号-您的代码中没有这些。然后，在类别函数中，您需要切换到实际的JSX，而不是concat字符串，因为那将无法工作。

我认为最好的方法是阅读React的官方教程，以解释什么是React IS及其工作方式。阅读完该内容后，该问题将自行解决。

所以请查看official documentation：）

从React应用程序中的字符串创建下拉列表选项

2 个答案: