Todavía soy nuevo en React.
Me preguntaba, ¿cómo transfiero datos de, digamos, "Página principal" a otra página para mostrar los resultados?
¿Creo que tiene algo que ver con los accesorios? Pero no estoy del todo seguro.
Mi página principal tiene etiquetas de entrada/selección que incluyen el nombre, el valor, las selecciones del usuario y las fechas.
Quiero poder tomar toda esa información y mostrarla en otra página llamada "DisplayResults" y tal vez usar los datos para otras cosas, tal vez crear una tabla con la información.
¡Muchas gracias por su ayuda!
Esta es mi aplicación.jsx
var React = require('react'); var ReactDOM = require('react-dom'); var {Route, Router, IndexRoute, hashHistory} = require('react-router'); var Main = require('Main'); var MainPage = require('MainPage'); var About = require('About'); // Load foundation require('style!css!foundation-sites/dist/foundation.min.css') $(document).foundation(); ReactDOM.render( <Router history={hashHistory}> <Route path="/" component={Main}> <Route path="about" component={About}/> <IndexRoute component={MainPage}/> </Route> </Router>, document.getElementById('app') );
Hay algunas formas diferentes... Una buena opción sería usar alguna capa de administración de estado como Redux o MobX
Una simple es hacer que su componente Main
guarde esos datos en su estado y los pase a las otras páginas como accesorios. Dado que está utilizando react-router
, deberá clonar this.props.children
en su componente Main
para agregar accesorios adicionales como los datos y la función que establece los datos.
Su componente Main
probablemente se vería algo así como
class Main extends Component { constructor(props) { this.state = { data: 'some default data', } } updateData(data) { this.setState({ data }); } render() { return <div> <Header /> {React.cloneElement(this.props.children, { data: this.state.data, setData: this.updateData })} </div> } } class MainPage extends Component { render() { return <div> <input type="text" onChange={e => this.props.setData({ field: e.target.value })} /> <Link to="/DisplayResults">Go to Results</Link> </div> } } class DisplayResults extends Component { render() { return <div> {this.props.data.field} </div> } }
Técnicamente, React crea una aplicación de una sola página, por lo tanto, no hay otra página a la que pasar datos.
Sin embargo, creo que podría estar hablando de pasar datos a components
. Siempre estructuro mis aplicaciones React en carpetas de container
y component
. La carpeta contenedora es donde se encuentran todos los componentes lógicos y la carpeta de componentes es donde se encuentran todos los componentes de la interfaz de usuario.
Una de las cosas que hace que React sea tan intuitivo es que puede pasar fácilmente datos de componentes principales a componentes secundarios a través de accesorios. En otras palabras, mis componentes lógicos pasan datos a los componentes de la interfaz de usuario a través de accesorios.
Por ejemplo, supongamos que quiero que mi componente lógico llamado Dashboard pase datos de la organización a mi componente de interfaz de usuario MyChildComponent
, haría algo como esto:
containers/DashBoard/index.js
export class DashBoard extends React.Component { // eslint-disable-line react/prefer-stateless-function constructor(props) { super(props); this.state = { organizations: null, }; this.rowCallback = this.rowCallback.bind(this); } render() { <MyChildComponent orgs={this.state.organizations} /> } }
components/MyChildComponent/index.js
export class MyChildComponent extends React.Component { constructor(props) { super(props); } render(){ <div> {this.props.orgs} </div> } }
Esta es solo una forma de manejar el paso de datos. También puede pasar valores durante el enrutamiento entre componentes lógicos, o usar una biblioteca de flujo como redux
para crear variables de estado, etc.
Tenga en cuenta que los extractos de mi código utilizan es6 y necesitan un compilador de babel. También prefiero usar funciones para los componentes de la interfaz de usuario cuando sea posible, ya que creo que es React Way.