Question

我是React的新手，我正在创建一个网页来显示项目列表。

我在一个名为admins.js的文件中有这个React Code：

 //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的第一个建议，而不是将组件附加到窗口对象。

从jsp调用React JS

2 个答案: