将DOM元素插入React组件

Question

我使用django作为后端，并且大部分也作为前端，异常是在reactjs中创建的一种形式。为了加速这个表单的加载，我想通过从html代替使用请求来加载它的数据。 Django会在加载页面时发送数据和表单，而另一个请求不是必需的。我设法抓取的数据，这是HTML，但我正在运行到以下错误：

未捕获（承诺）错误：对象无效作为React子（找到：[对象HTMLOptionElement]）。如果您打算渲染一组儿童，请改用数组，或者使用React附加组件中的createFragment（object）来包装对象。检查渲染方法

出于测试目的，我从另一种形式，看起来像这样掠HTML：

<select name="tz" border="solid 1px #F6892D" id="id_tz"> 
    <option value="Africa/Abidjan">Africa/Abidjan</option> 
    (...) 
    <option value="" selected=""></option> 
</select> 

它发生安装该组件后：

componentDidMount =() => { 
    document.addEventListener("DOMContentLoaded", (event) => { 
     var tz_options = document.getElementById('id_tz'); 
     this.setState({tz:Array.from(tz_options)}); 
    }); 
} 

我也试图解决通过添加toArray函数和安装createFragment插件的错误，但它没有帮助：

function toArray(obj) { 
    var array = []; 
    for (var i = obj.length >>> 0; i--;) { 
    console.log(obj[i].value) 
    array[i] = createFragment(obj[i]); 
    } 
    return array; 
} 

这就是我如何试图渲染它，它也能产生上面显示错误的地方：

    <select 
         value={this.state.value} 
         className="form-control" 
         id={this.props.id} 
         ref={this.props.id} 
         onChange={this.handleChange}> 

         { 
          tz_options.map(function (item) { 
           x+=1; 
           if (item.value) { 
            item.key = item.value; 
           } else { 
            item.key = String(x); 
           } 
            return item;         
          }) 
         } 
        </select> 

Answer 1

你应该使你的select使用option元素来表示其孩子：

<select 
    value={this.state.value} 
    className="form-control" 
    id={this.props.id} 
    ref={this.props.id} 
    onChange={this.handleChange}> 

    { 
     tz_options.map(function (item) { 
      x+=1; 
      var key; 
      if (item.value) { 
       key = item.value; 
      } else { 
       key = String(x); 
      } 
      return <option key={key} value={item.value}>{item.key}</option>;         
     }) 
    } 
</select>