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

使用for循环渲染React渲染函数

1 个答案: