从jsp调用React JS

Question

我是React的新手，我正在制作一个网页以显示项目列表。

我在名为admins.js的文件中有此React代码：

 //more code

    var AdminsBox = React.createClass({
    getInitialState: function() {
        return {adminsList: []};
    },
    setAdminsArray: function(data) {
        this.setState({adminsList: data});
    },
    render: function() {

        return (
            <div>
                <AdminsContentBox adminsList={this.state.adminsList}/>
            </div>
        );
    }});

    var AdminsBoxRender = ReactDOM.render(
        <AdminsBox />,
        document.getElementById('adminsContent')
    );

并在文件index.jsp中：

    <html lang="es">
    <head>
        <link rel="stylesheet" href="base.css" />
        <script src="react.js"></script>
        <script src="react-dom.js"></script>
        <script src="browser.js" charset="utf-8"></script>
        <script src="jquery.min.js"></script>
        <script src="marked.min.js"></script>

        <link rel="stylesheet" href="fonts.css">
        <link rel="stylesheet" href="material.indigo-blue.min.css">

        <script type="text/babel" src="admins.js"></script>

        <script>
            $(document).ready(function() {
                $.ajax({
                    url: 'myUrlServlet',
                    type: 'POST',
                    data: "function=getAdmins",
                    dataType: "json",
                    success: function(data){
                        AdminsBoxRender.setAdminsArray(data);
                    }
                });
            });
        </script>
    </head>


 <body>
        <div id="adminsContent"></div>
    </body>

我得到的错误是AdminsBoxRender未定义。

我究竟做错了什么？

先感谢您。

Answer 1

这不是获取组件数据的正确方法，您应该在componentDidMount()获取数据

var AdminsBox = React.createClass({
    getInitialState: function() {
        return {adminsList: []};
    },
    componentDidMount: function(){
         $.ajax({
                url: 'myUrlServlet',
                type: 'POST',
                data: "function=getAdmins",
                dataType: "json",
                success: function(data){
                    this.setState({adminsList: data});
                }
            });
    },
    setAdminsArray: function(data) {
        this.setState({adminsList: data});
    },
    render: function() {

        return (
            <div>
                <AdminsContentBox adminsList={this.state.adminsList}/>
            </div>
        );
}});


window.AdminsBoxRender = ReactDOM.render(
    <AdminsBox />,
    document.getElementById('adminsContent')
);

您应该将与React相关的内容保留在React内部。

Answer 2

您的方法将属于“对抗框架”的标题。

我建议遵循QoP的第一个建议，而不是将组件附加到window对象。

从jsp调用React JS

问题描述

2 个解决方案

解决方案1
4 已采纳 2016-06-16 10:02:45

解决方案2
1 2016-10-14 02:11:21

从jsp调用React JS

问题描述

2 个解决方案

解决方案1 4 已采纳 2016-06-16 10:02:45

解决方案2 1 2016-10-14 02:11:21

解决方案1
4 已采纳 2016-06-16 10:02:45

解决方案2
1 2016-10-14 02:11:21