从react app中的字符串创建下拉列表选项

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类似。事实上，一旦JSX由babel处理，它就是纯粹的Javascript。

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

我认为最好的办法是通过官方的React教程来解释React IS及其工作原理。读完之后，这个问题就会自行解决。

所以请查看official documentation :)