Hemos estado experimentando algunos problemas en el uso de reaccionar, pero un poco hierve a una parte de la forma en que hemos estado utilizando reaccionar.

Cómo debe haber sido mostrar/ocultar componentes hijos?

Esta es la forma en que hemos codificado (esto son sólo fragmentos de nuestros componentes)…

_click: function() {
  if ($('#add-here').is(':empty'))
    React.render(<Child />, $('#add-here')[0]);
  else
    React.unmountComponentAtNode($('#add-here')[0]);
},
render: function() {
  return(
    <div>
      <div onClick={this._click}>Parent - click me to add child</div>
      <div id="add-here"></div>
    </div>
  )
}

y últimamente he estado leyendo ejemplos de como debería de haber sido en algún lugar a lo largo de estas líneas:

getInitialState: function () {
  return { showChild: false };
},
_click: function() {
  this.setState({showChild: !this.state.showChild});
},
render: function() {
  return(
    <div>
      <div onClick={this._click}>Parent - click me to add child</div>
      {this.state.showChild ? <Child /> : null}
    </div>
  )
}

Debería haber sido el uso que Reaccionar.render()? Parece detener varias cosas como shouldComponentUpdate a la cascada de el niño y las cosas como e.stopPropagation

  • Puede usted explicar con más detalle cuál es el problema con su 2do solución? Que en realidad es la manera preferida de hacer. Tiene un atributo de estado showChild que puede pasar cuando su div se hace clic. Llamar setState, a continuación, vuelve a procesar su componente.
  • Oh. Yo en realidad no he tenido experiencia pero con la 2ª solución. Sólo he probado en una aplicación pequeña y parece que funciona. Hemos estado utilizando el primero desde que era lo que les han enseñado a nosotros antes. Pero ahora hemos estado experimentando problemas como el de la stopPropagation no de trabajo, o necesidad de actualizar manualmente Niño cuando shouldComponentUpdate desencadenantes de los padres. Pero realmente no he visto que ninguno de los documentos relativos a esta «forma preferida», sólo ejemplos de diversos tutoriales. Así que debe haber estado usando la 2ª solución?
  • Sí, la 2ª es la mejor opción. El Reaccionar docs y ejemplos no usar JQuery. Los documentos tienen una gran cantidad de información. facebook.github.io/reaccionar/docs/…
  • Bueno, yo podría haber todavía se utiliza this.refs por eso, yo, rápidamente, escribió en jQuery.
  • Simplemente no usar jQuery en todo o mínimamente posible.. en Cualquier momento de manipular el DOM, se corre el riesgo de Reaccionar a flipar en usted. Generalmente sopla errores similares: unable to find component at root ''
InformationsquelleAutor index | 2015-04-28

2 Comentarios

  1. 61

    Me ha proporcionado un ejemplo de trabajo que sigue el segundo enfoque. La actualización del componente en el estado es la forma que prefiera para mostrar/ocultar los niños.

    Dado que tiene este contenedor:

    <div id="container">
    </div>

    puede utilizar Javascript moderno (ES6, primer ejemplo) o el clásico de JavaScript (ES5, segundo ejemplo) para implementar el componente de lógica:

    Mostrar/ocultar los componentes mediante la ES6

    Probar esta demo en vivo en JSFiddle

    class Child extends React.Component {
      render() {
        return (<div>I'm the child</div>);
      }
    }
    
    class ShowHide extends React.Component {
      constructor() {
        super();
        this.state = {
          childVisible: false
        }
      }
    
      render() {
        return (
          <div>
            <div onClick={() => this.onClick()}>
              Parent - click me to show/hide my child
            </div>
            {
              this.state.childVisible
                ? <Child />
                : null
            }
          </div>
        )
      }
    
      onClick() {
        this.setState(prevState => ({ childVisible: !prevState.childVisible }));
      }
    };
    
    React.render(<ShowHide />, document.getElementById('container'));

    Mostrar/ocultar componentes utilizando ES5

    Probar esta demo en vivo en JSFiddle

    var Child = React.createClass({
      render: function() {
        return (<div>I'm the child</div>);
      }
    });
    
    var ShowHide = React.createClass({
      getInitialState: function () {
        return { childVisible: false };
      },
    
      render: function() {
        return (
          <div>
            <div onClick={this.onClick}>
              Parent - click me to show/hide my child
            </div>
            {
              this.state.childVisible
                ? <Child />
                : null
            }
          </div>
        )
      },
    
      onClick: function() {
        this.setState({childVisible: !this.state.childVisible});
      }
    });
    
    React.render(<ShowHide />, document.body);
    • Esto es realmente agradable. Me gustaría implementar esto. Sin embargo también tengo que quitar el Niño, si hace clic, otros que el Hijo del componente. Podría usted por favor me guía ¿cómo?
    • Sí, me han pedido here. Podría usted por favor me ayude. Gracias.
    • Este es el último uso de ES6 norton ghost.ser/Mo2_UPkZjJU
    • Sólo una nota sobre ternario something ? <Child /> : null, ¿por qué no utilizar something && (<Child />) lugar? Di cuenta de esto ayer y me gusta mucho
    • Me gusta el && sintaxis para este caso, también.
    • Soy nuevo en Reaccionar y no la comprensión de este concepto central. Si <Child/> es un componente compartido entre diferentes <Parents/>, con este diseño, cada padre tiene que implementar mostrar y ocultar los métodos de creación de toneladas de la duplicación de código. He considerado que el uso de refs en mis proyectos para evitar este problema (this.child.current.hide()) sin embargo, esto parece una mala práctica. ¿Hay alguna solución para la duplicación de código de problema?
    • Usted podría tener diferentes «Padre» de los componentes de implementar el mostrar/ocultar de sus hijos. Hay diferentes soluciones para evitar la duplicación de código, sin embargo en este caso la aplicación es tan trivial que más bien me gustaría volver a implementar esta mostrar/ocultar el comportamiento en el Niño que contienen componentes padre.

  2. 0
        /* eslint-disable jsx-a11y/img-has-alt,class-methods-use-this */
    import React, { Component } from 'react';
    import PropTypes from 'prop-types';
    import todoStyle from 'src/style/todo-style.scss';
    import { Router, Route, hashHistory as history } from 'react-router';
    import Myaccount from 'src/components/myaccount.jsx';
    export default class Headermenu extends Component {
    constructor(){
    super();
    //Initial state
    this.state = { open: false };
    }
    toggle() {
    this.setState({
    open: !this.state.open
    });
    }
    componentdidMount() {
    this.menuclickevent = this.menuclickevent.bind(this);
    this.collapse = this.collapse.bind(this);
    this.myaccount = this.myaccount.bind(this);
    this.logout = this.logout.bind(this);
    }
    render() {
    return (
    <div>
    <div style={{ textAlign: 'center', marginTop: '10px' }} id="menudiv" onBlur={this.collapse}>
    <button onClick={this.toggle.bind(this)} > Menu </button>
    <div id="demo" className={"collapse" + (this.state.open ? ' in' : '')}>
    <label className="menu_items" onClick={this.myaccount}>MyAccount</label>
    <div onClick={this.logout}>
    Logout
    </div>
    </div>
    </div>
    </div>
    );
    }
    menuclickevent() {
    const listmenu = document.getElementById('listmenu');
    listmenu.style.display = 'block';
    }
    logout() {
    console.log('Logout');
    }
    myaccount() {
    history.push('/myaccount');
    window.location.reload();
    }
    }

Dejar respuesta

Please enter your comment!
Please enter your name here