將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>