jspからReact JSを呼び出す

私はReactを初めて使用しています。アイテムのリストを表示するためのウェブページを作成しています。jspからReact JSを呼び出す

私は、これは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が定義されていないです。

私は間違っていますか？

ありがとうございます。

出典

2016-06-16 JSP749

あなたのコンポーネントのデータをフェッチするための適切な方法ではありません、あなたはあなたが反応する「内側」反応するように関連するものを維持する必要があり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') 
);

でそれをフェッチする必要があります。

出典

2016-06-16 10:02:45 QoP

お返事ありがとうございます。反応コンポーネント内のメソッド "componenDidMount"では、私は同じエラーを受けます。あなたの最後の発言から、私は反応する外のコンポーネントにアクセスできないと思いましたか？ – JSP749

外部からアクセスできますが、コンポーネントがまだレンダリングされていない可能性があるため、安全ではありません。レンダリングされたコンポーネントをウィンドウオブジェクトに添付することができます。そうすればどこにでもアクセスできます。 – QoP

レンダリングされたコンポーネントをウィンドウオブジェクトにアタッチするとうまくいきました。ありがとうございました！ – JSP749

あなたのアプローチは「フレームワークと戦う」という見出しの下にあります。

コンポーネントをウィンドウオブジェクトに接続するのではなく、QoPのの最初のの推奨事項をお勧めします。

出典

2016-10-14 02:11:21

jspからReact JSを呼び出す

答えて

関連する問題