javascript - example - jquery confirm dialog
Reaccionar la confusión del enrutador (5)
Nuevo para reaccionar y reaccionar-enrutador.
Estoy tratando de entender este ejemplo:
https://github.com/ReactTraining/react-router/blob/1.0.x/docs/API.md#components-1
Pero this.props nunca contiene la barra principal o la barra lateral. Mi código:
Main.js
ReactDOM.render(
<Router>
<Route path="/" component={App2}>
<Route path="/" components={{main: Home, sidebar: HomeSidebar}}/>
</Route>
</Router>,
document.getElementById(''content'')
);
App2.js
class App2 extends React.Component {
render() {
const {main, sidebar} = this.props;
return (
<div>
<Menu inverted vertical fixed="left">
{sidebar}
</Menu>
<Container className="main-container">
{main}
</Container>
</div>
);
}
}
export default App2;
Home.js
import React from ''react'';
class Home extends React.Component {
render() {
return (
<div><h1>Home</h1></div>
);
}
}
export default Home;
HomeSidebar.js
class HomeSidebar extends React.Component {
render() {
return (
<div>
<p>I''m a sidebar</p>
</div>
);
}
}
export default HomeSidebar;
Estoy usando electrón con las herramientas de desarrollo de react. Cada vez que depuro, this.props no contiene main ni sidebar. ¿Alguna idea de por qué está pasando esto?
También intenté usar IndexRoute, pero parece que no es compatible con un componente de componentes.
Otras cosas que he intentado
ReactDOM.render(
<Router>
<Route component={App2}>
<Route path="/" components={{main: Home, sidebar: HomeSidebar}}/>
</Route>
</Router>,
document.getElementById(''content'')
);
ReactDOM.render(
<Router>
<Route path="/" component={App2} components={{main: Home, sidebar: HomeSidebar}}>
<Route path="admin" components={{main: Admin, sidebar: AdminSidebar}}/>
</Route>
</Router>,
document.getElementById(''content'')
);
El ejemplo de github fue escrito hace 2 años (mira aquí ) y no estoy seguro de qué versión particular está relacionado. Y no estoy seguro si funciona ahora (porque también soy nuevo con la reacción), pero sé que no tienes que usar este enfoque para alcanzar este objetivo, puedes usar un componente separado que contenga mainz y sidebar , aquí mi ejemplo:
class App2 extends React.Component {
render() {
return (
// Your Menu.
// Your Container.
<div>
{this.props.children}
</div>
);
}
}
class Home extends React.Component {
render() {
return (<div><h1>Home</h1></div>);
}
}
class HomeSidebar extends React.Component {
render() {
return (<div><p>I am a sidebar</p></div>);
}
}
class HomeWithSidebar extends React.Component {
render() {
return (
<div>
<Home />
<HomeSidebar />
</div>
);
}
}
ReactDOM.render(
<Router history={browserHistory}>
<Route path="/" component={App2}>
<Route path="/a2" components={HomeWithSidebar} />
</Route>
</Router>,
document.getElementById(''content'')
);
PD: No olvide utilizar <Router history={browserHistory}> en su ejemplo.
Y use IndexRoute en su ejemplo o especifique otro, como /a2 en mi ejemplo.
Parece que tiene que funcionar el accesorio de componentes que necesita usar el <IndexRoute /> lugar de <Route /> . En los documentos reaccionar-enrutador, menciona que IndexRoute tiene todos los mismos apoyos que Route, lo que hace
<IndexRoute components={{main: Main, side: Side}} />
¡trabajos!
Código completo:
React.render((
<Router>
<Route path="/" component={App} >
<IndexRoute components={{main: Main, side: Side}} />
</Route>
</Router>
), document.getElementById(''app''))
Codepen: http://codepen.io/chmaltsp/pen/ZeLaPr?editors=001
¡Aclamaciones!
Soy nuevo para reaccionar al enrutador, pero estoy seguro de que las rutas que estás usando son incorrectas. en el ejemplo que le da, tiene 2 rutas diferentes que se resuelven en la misma ruta (/):
ReactDOM.render(
<Router>
<Route path="/" component={App2}>
<Route path="/" components={{main: Home, sidebar: HomeSidebar}}/>
</Route>
</Router>,
document.getElementById(''content'')
);
Creo que esto debería ser algo así como:
ReactDOM.render(
<Router>
<Route path="/" component={App2}>
<IndexRoute components={{main: Home, sidebar: HomeSidebar}}/>
<Route path="some/other/path" components={{main: Home, sidebar: SomeOtherSidebar}}/>
</Route>
</Router>,
document.getElementById(''content'')
);
Si está utilizando la versión actual de reaccionar-enrutador (v4.0.0), parece que acabaron con la propiedad de componentes en Rutas: https://reacttraining.com/react-router/web/api/Route
Puede renderizar Rutas en cualquier lugar, e incluso tienen un ejemplo de barra lateral donde lo hacen. Tienen un conjunto de componentes de ruta para representar los componentes principales y otro conjunto de componentes de ruta para las barras laterales, pero ambos provienen de una única configuración de ruta para mantenerlo SECO.
Para traducir eso a tu código, puedes crear una configuración de ruta:
const routes = [
{ path: ''/'',
sidebar: Sidebar
main: Main
}
];
Luego en Main.js
ReactDOM.render(
<Router>
<Route component={App2}>
{routes.map((route, index) => (
<Route
key={index}
path={route.path}
component={route.main}
/>
))}
</Route>
</Router>,
document.getElementById(''content'')
);
Luego en App2.js
class App2 extends React.Component {
render() {
return (
<div>
<Menu inverted vertical fixed="left">
{routes.map((route, index) => (
<Route
key={index}
path={route.path}
component={route.sidebar}
/>
))}
</Menu>
<Container className="main-container">
{this.props.children}
</Container>
</div>
);
}
}
export default App2;
Espero que sepa que está utilizando reaccionar-enrutador 1.0.xy está bastante desactualizado. La versión actual es 4.x.
A continuación, el código funciona perfectamente (según el ejemplo proporcionado).
let Router = ReactRouter.Router;
let RouterContext = Router.RouterContext;
let Route = ReactRouter.Route;
class App2 extends React.Component {
render () {
const { main, sidebar } = this.props;
return (
<div>
<div className="Main">
{main}
</div>
<div className="Sidebar">
{sidebar}
</div>
</div>
)
}
}
class Home extends React.Component {
render() {
return (
<div><h1>Home</h1></div>
);
}
}
class HomeSidebar extends React.Component {
render() {
return (
<div>
<p>I''m a sidebar</p>
</div>
);
}
}
ReactDOM.render(
<Router>
<Route component={App2}>
<Route path="/" components={{main: Home, sidebar: HomeSidebar}}/>
</Route>
</Router>,
document.getElementById(''content'')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/1.0.3/ReactRouter.min.js"></script>
<div id="content"></div>