Вызов React JS из jsp

Я новичок в React, и я создаю веб-страницу, чтобы показать список элементов.

У меня есть этот Код Реагирования в файле admins.js:

 //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 не определен.

Что я делаю не так?

Заранее спасибо.

javascript,jsp,reactjs,

0

Ответов: 2

2 принят

Это не правильный способ получения данных для вашего компонента, вы должны получить его в 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')
);

Вы должны сохранить материал, связанный с реакцией «внутри».

1

Ваш подход будет подпадать под «борьбу с рамками».

Я бы рекомендовал перейти с первой рекомендацией QoP, а не прикреплять компонент к объекту окна.

JavaScript, JSP, reactjs,
Похожие вопросы
Яндекс.Метрика