Javascript 呈现推送到数组中的未关闭html元素

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

ReferenceError:未定义el

如果使用简单引号（'）

bookingStatusList.push（“”）；

错误消失了，但是

和

html被呈现为文本，而不是html标记（正确呈现

）

这是我的密码

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>
        );
    }

render（）
{
const{bookingStatus}=this.state；
const bookingStatusList=[]；
if（预订状态长度）
{
bookingStatusList.push（）；
bookingStatus.map（el=>{
bookingStatusList.push(
{el.name}
)
})
bookingStatusList.push（）
}
其他的
{
bookingStatusList.push（'加载'）
}
返回(
{bookingStatusList}
);
}

JSX语法看起来像HTML，但它不是HTML。它被传输到JavaScript，JavaScript显式地创建元素，而不处理标记

所以，不，你不能那样做

把你的代码翻过来

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

const list\u of\u options=bookingStatus.map（等）；
const div={选项列表}；

别忘了，我们写的是JSX而不是HTML，它会被传输到js中。因此，您需要对代码进行一点重构，循环数组并创建所有选项，然后将该变量放入jsx中

查看更多详细信息

这样写：

render() {
    const { bookingStatus } = this.state;
    let bookingStatusList, options = [];

    if(bookingStatus.length) {
        bookingStatus.map(id => {
            options.push(
                <option value={el.id} key={el.id}>
                    {el.name}
                </option>
            )
        })
        bookingStatusList = (
            <div className="select">
                <select id="department">
                    {options}
                </select>
            </div>
        );
    }
    else {
        bookingStatusList = <div>LOADING</div>;
    }

    return (
        <div>
            {bookingStatusList}
        </div>
    );
}

render（）{
const{bookingStatus}=this.state；
让bookingStatusList，选项=[]；
if（预订状态长度）{
bookingStatus.map（id=>{
选项。推(
{el.name}
)
})
bookingStatusList=(
{options}
);
}
否则{
bookingStatusList=加载；
}
返回(
{bookingStatusList}
);
}
el
也应该指什么？
bookingStatus.map（id=>{
将其更改为
bookingStatus.map（el=>{
bookingStatus.map）（id=>{
到
bookingStatus.map）（el=>{
是的，对不起，我的代码示例出错了，问题仍然存在
render() {
    const { bookingStatus } = this.state;
    let bookingStatusList, options = [];

    if(bookingStatus.length) {
        bookingStatus.map(id => {
            options.push(
                <option value={el.id} key={el.id}>
                    {el.name}
                </option>
            )
        })
        bookingStatusList = (
            <div className="select">
                <select id="department">
                    {options}
                </select>
            </div>
        );
    }
    else {
        bookingStatusList = <div>LOADING</div>;
    }

    return (
        <div>
            {bookingStatusList}
        </div>
    );
}