node.js - create - react documentation
Renderizar un componente desde fuera de ReactJS (1)
Desde aquí :
"La única forma de obtener un control para una instancia de React Component fuera de React es almacenando el valor de retorno de React.render".
Necesito presentar un componente React fuera de React y la razón para ello voy a mencionar a continuación.
En mi node.js, la aplicación expressJS, estoy usando ''reaccionar-enrutador-componente'' y ''reaccionar-asincrónico'' .
En app.js: el archivo que se supone debe ejecutarse,
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);
});
});
En 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 es el archivo navegado de todos los archivos .jsx .
En 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;
En custom.js:
$(''.click_me'').click(function(){
PostListRenderObj=PostListRender(products_cart_found);
PostListRenderObj.renderNow();
$(''odometer'').html(''price'');// price variable is calculated anyhow
});
La página muestra bien.
EDIT 3 comienza
Ahora quiero renderizar el componente PostList al hacer clic en el click_me div .
EDITAR 3 Termina
Pero cuando hago clic en el elemento click_me , el navegador muestra el script ocupado, la consola muestra
ReactJS - ReactMount: el elemento raíz se ha eliminado de su contenedor original. Nuevo contenedor
Y el límite de registro de Firebug excede.
Entonces, ¿por qué quiero renderizar al hacer clic desde afuera? React.js: tengo que ejecutar el complemento jQuery Odomoeter al hacer clic en el click_me div . El complemento no se desarrolló como un middleware de nodo, aunque puede instalarse de la misma forma que se instala un middleware y el código fuente del complemento se guarda dentro de la carpeta node_modules .
Edit2 comienza:
Como el complemento no es un middleware de nodo, no puedo require desde el interior del nodo. Sin embargo, puedo realizar el evento click (código no mostrado) desde el nodo interno y ejecutar el siguiente código allí también:
$(''odometer'').html(''price'');// price variable is calculated anyhow
En este caso, incluyo el complemento en el navegador con la etiqueta <script /> y el paquete bundle.js viene después del script del complemento. Pero la animación no se muestra correctamente. Así que llevo al evento de clic del lado del cliente en el custom.js .
Si no require el complemento sea un middleware desde el nodo interno y solo lo incluyo en la página antes del archivo JS explorado y realizo el clic en el evento Reaccionar, entonces la animación del odómetro no se muestra correctamente.
Edit2 ends:
Entonces, ¿cuál es la forma de hacer que el componente PostList React fuera de React?
EDITAR 1 El }); fue colocado erróneamente allí
No puedo entender la descripción de su pregunta, pero esto responde la pregunta del título:
¿Cómo renderizar los componentes React fuera de reaccionar?
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})
})
Dentro de reaccionar puedes simplemente llamar al componente.