渲染未关闭的 html 元素，推入数组答案

【问题标题】：Render unclosed html elements pushed into an array渲染未关闭的 html 元素，推入数组
【发布时间】：2019-08-30 17:41:22
【问题描述】：

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

ReferenceError: el 未定义

如果使用单引号 (')

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

【问题讨论】：

el 也应该指代什么？
bookingStatus.map(id => { 改为bookingStatus.map(el => {
bookingStatus.map(id => { 到 bookingStatus.map(el => {
是的，对不起，我的代码示例出错了，问题仍然存在

标签： javascript reactjs

【解决方案1】：

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

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

把你的代码翻过来。

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

【讨论】：

【解决方案2】：

别忘了，我们写的是 JSX 而不是 HTML，它会被转译成 js。所以你需要稍微重构你的代码，循环遍历数组并创建所有选项，然后将该变量放入 jsx 中。

查看Doc了解更多详情。

这样写：

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

【讨论】：