javascript - 将 DOM 元素插入 React 组件

Question

我使用 django 作为后端，其中大部分也作为前端，异常(exception)是在 ReactJS 中制作的一种形式。为了加快此表单的加载速度，我想通过从 html 中获取数据而不是使用 request 来加载它的数据。 Django 将在加载页面时发送数据和表单，并且不需要另一个请求。我设法获取了 html 数据，但遇到了以下错误:

未捕获( promise 中)错误:对象作为 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

您应该使用 option 元素来呈现您的 select 来代表其子元素:

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