将DOM元素插入React组件

Question

我将django用作后端，并且大部分也用作前端，例外是reactjs中制作的一种形式。 为了加快此表单的加载速度，我想通过从html抓取而不是使用request来加载它的数据。 Django会在加载页面时发送数据和表单，而无需其他请求。 我设法获取了html数据，但遇到以下错误：

未捕获（承诺）错误：对象无效，不能作为React子对象（找到：[object 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>