Render un componente da ReactJS esterni

Da here:Render un componente da ReactJS esterni

"L'unico modo per ottenere un handle a un'istanza React componente esterno del React è memorizzando il valore restituito React.render."

Ho bisogno di rendere un componente React all'esterno di React e il motivo per cui ho intenzione di menzionare di seguito.

Nel mio nodo.js, app ExpressJS, sto usando 'react-router-component' e 'react-async'.

In app.js -Il che dovrebbe essere eseguito,

var url=require('url'); 
    var App=require('./react/App.jsx'); 
    var app = express(); 
    app.get('*',function(req,res){ 


    //}); SEE EDIT 1 BELOW 

    var path = url.parse(req.url).pathname; 
       ReactAsync.renderComponentToStringWithAsyncState(App({path:path}),function(err, markup) { 
    res.send('<!DOCTYPE html>'+markup); 

      }); 
    });

In App.jsx,

PostList = require('./components/PostList.jsx'); 
    var App = React.createClass({ 
    render: function() { 
     return (

      <html> 
      <head lang="en"> 
      </head> 
     <body> 
     <div id="main"> 

     <Locations path={this.props.path}> 

      <Location path="/" handler={PostList} /> 
      <Location path="/admin" handler={Admin} /> 
     </Locations> 


     <script type="text/javascript" src="/scripts/react/bundle.js"></script> 
     <script type="text/javascript" src="/scripts/custom.js"></script>     

     </body> 
     </html> 
     });

bundle.js è il file browserified da tutti i file .jsx.

In PostList.jsx,

var PostList = React.createClass({ 

     mixins: [ReactAsync.Mixin], 

     getInitialStateAsync: function(cb) { 

      if(typeof this.props.prods==='undefined'){ 

      request.get('http://localhost:8000/api/cats_default', function(response) { 

        cb(null, {items_show:response.body}); 

         }); 
                } 
     }, 

     setTopmostParentState: function(items_show){ 

      this.setState({ 
      items_show:items_show 
         }); 

     }, 

     render: function() { 

     return (

       <div className="postList" id="postList"> 
       **// Things go here** 
       <div className="click_me" >Click me</div> 
       </div>  
      } 

    }); 


    PostListRender=function(cart_prods){ 

     var renderNow=function(){ 

      //return <PostList cart_prods={cart_prods}></PostList> 

      React.renderComponent(<PostList cart_prods={cart_prods}></PostList>,document.getElementById('postList')); 
           }; 

     return { 
      renderNow:renderNow 
       } 
     }; 
    module.exports=PostList;

In custom.js:

$('.click_me').click(function(){ 

PostListRenderObj=PostListRender(products_cart_found); 
PostListRenderObj.renderNow(); 

$('odometer').html('price');// price variable is calculated anyhow 

});

La pagina mostra bene.

EDIT 3 Avvia

Ora voglio rendere la componente PostList sulla cliccando sul click_me div.

EDIT 3 Ends

ma quando clicco sull'elemento click_me, il browser mostra sceneggiatura occupato, console mostra

ReactJS - ReactMount: elemento radice è stato rimosso dal suo contenitore originale. Nuovo contenitore

E il limite del registro Firebug supera.

Allora perché voglio rendere al clic da react.js esterni: devo correre il plugin jQuery Odomoeter sulla cliccando sul click_me div. Il plug-in non è stato sviluppato come nodo middleware sebbene sia che può essere installato nel modo in cui è installato un middleware e il codice di base del plugin viene salvato nella cartella node_modules.

Edit2 Inizia:

Poiché il plugin non è un middleware nodo, non posso require che dal nodo dentro.Tuttavia posso eseguire l'evento click (codice non mostrato) dall'interno del nodo ed eseguire il codice riportato di seguito anche lì:

$('odometer').html('price');// price variable is calculated anyhow

In questo caso includo il plugin nel browser con <script /> tag e il browserified bundle.js viene dopo lo script del plugin. Ma l'animazione non è mostrata correttamente. Quindi prendo l'evento click side client nello custom.js.

Se non faccio require il plugin per essere un middleware dall'interno nodo e proprio includo nella pagina prima che il file JS browserified e eseguire l'evento click all'interno reagire, poi l'animazione del contachilometri è non mostrato correttamente .

Edit2 termina:

Allora, qual è il modo per rendere il PostList Reagire componente esterno Reagire?

EDIT 1 Il }); era abbastanza erroneamente messi lì

fonte

2015-01-13 Istiaque Ahmed

È piuttosto difficile dire cosa stai chiedendo/cercando di fare qui, e penso che potrebbero esserci stati alcuni problemi di copia/incolla in quanto il codice non è valido come scritto. Avete un progetto JSFiddle, GitHub o qualche altro esempio realmente funzionante (o non proprio funzionante)? –

@BrandonTilley, ho incollato solo la parte rilevante qui. Ho bisogno solo della logica comunque. Quali problemi trovi? –

@BrandonTilley, la pagina viene visualizzata nel browser come previsto. Ora facendo clic su 'div' nella pagina dal lato client Reagire, voglio ri-renderizzare la pagina. Questo è tutto ciò che voglio fare. L'evento "click" si svolgerà dal lato client. Il motivo per cui non faccio scattare il "clic" da React è che devo eseguire un plug-in jQuery, cioè un contachilometri a ogni clic, e se lo faccio scattare da React sul lato server, non posso eseguire correttamente il plugin da lì come il plugin non è un middleware di nodo. Qualcosa di più da spiegare? –

non riesco a capire la tua descrizione domanda, ma questo risponde alla domanda del titolo:

Come si esegue il rendering reagire i componenti al di fuori di reagire?

MyComponent = require('MyComponent') 

element = document.getElementById('postList'); 

renderedComp = ReactDOM.render(MyComponent,{...someProps},element); 

// => render returns the component instance. 

$(document).on('something, function(){ 
    renderedComp.setState({thingClicked: true}) 
})

All'interno di reagire si può chiamare il componente.

fonte

2016-03-17 05:57:41

Render un componente da ReactJS esterni

risposta

Problemi correlati