javascript - 渲染插入数组的未关闭的 html 元素

Question

我想呈现一个简单的列表，但似乎 react 无法呈现未关闭的推送 html 元素。但它会导致错误

ReferenceError: el is not defined

如果使用单引号(')

bookingStatusList.push('<div className="select"><select id="department">');

错误消失了，但是 <div>和 <select> html 呈现为文本而不是 html 标记(<option> 已正确呈现)

这是我的代码

render()
    {
        const {bookingStatus} = this.state;
        const bookingStatusList = [];
        if(bookingStatus.length)
        {
            bookingStatusList.push(<div className="select"><select id="department">);
                bookingStatus.map(el => {
                bookingStatusList.push (
                    <option value={el.id} key={el.id}>
                        {el.name}
                    </option>
                )
            })
                bookingStatusList.push(</select></div>)
        }
        else
        {
            bookingStatusList.push('<div>LOADING</div>')
        }



        return (

            <div>

                        {bookingStatusList}

            </div>
        );
    }

Answer 1

JSX 语法看起来 像 HTML，但它不是 HTML。它被转译为明确创建元素且不处理标签的 JavaScript。

所以，不，你不能那样做。

将您的代码翻个底朝天。

const list_of_options = bookingStatus.map(etc etc);
const div = <div><select>{list_of_options}</select></div>;