在 React 渲染函数中使用 for 循环渲染一些 Html 元素

Question

我正在尝试使用 for 循环渲染一些 html。一切正常，但是 html 在那个 UL 元素中像字符串一样打印我不知道我做错了什么请帮助我解决这个问题。我是这个 React Js 的新手。

我的脚本

const Pagination = React.createClass({
    getInitialState: function () {
        return {
            "page": {
             "size": 100,
             "limit": 30,
             "offset": 0,
             "number": 1
           }

        };
    },

    render: function () {
        var html = [];
        var i = 0;
        var className = '';
        var noOfPages = 0;
        var number = 1;
        var page = this.state.page;
        if (page) {
            noOfPages = parseInt((page.size / page.limit), 10);
            for (i; i < noOfPages; i++) {
                className = (className === number) ? 'selected' : '';
                html.push('<li key=' + {i} + ' className=""><button className="' + {className} + '">' + {i} + '</button></li>');
            }
        }
        return (
            <div className="pagination-sec-wrapper">
                <form className="pagination-inner-sec-wrapper" id="pagination-form">
                    <ul className="">
                        {html}
                    </ul>
                </form>
            </div>
        );
    }

});

Answer 1

那是因为您将字符串值推入 HTML 数组。

html.push('<span key=' + {i} + ' className=""><button className="' + {className} + '">' + {i} + '</button></span>');

您需要推送 React 组件。

html.push(<span key={i} className="">
            <button className={className}>{i}</button>
          </span>);

重要的是要记住，即使 JSX 看起来像 HTML 字符串，它实际上只是常规 Javascript 函数调用的语法糖。

上面的JSX和下面的JS是一样的

html.push(React.createElement("span", { key: i, className: "" },
            React.createElement("button", { className: className }, i)));

在 React 渲染函数中使用 for 循环渲染一些 Html 元素

Using for loop render some Html elements in React render function

flux

reactjs

reactjs-flux