Afficher/Masquer des composants dans ReactJS

Nous avons connu quelques problèmes dans l'utilisation de réagir maintenant, mais il un peu se résume pour une partie de la façon dont nous avons été à l'aide de réagir.

Comment devrions-nous avons été montrer/cacher les composants enfants?

C'est la façon dont nous avons codé comme ça (ce ne sont que des bribes de nos composants)...

_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>
  )
}

et dernièrement, j'ai lu des exemples comme il se doit l'ai été quelque part le long de ces lignes:

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>
  )
}

Si j'ai été à l'aide de Réagir.render()? Il semble cesser de diverses choses comme des shouldComponentUpdate à la cascade de l'enfant et des choses comme e.stopPropagation...

  • Pouvez-vous expliquer plus en détail ce qu'est le problème avec votre 2ème solution est? C'est effectivement la meilleure façon de le faire. Avoir un attribut d'état showChild que vous bascule lorsque votre div est cliqué. L'appel de setState puis rerenders votre composant.
  • Oh. En fait je n'ai pas eu l'expérience encore avec la 2ème solution. Je ne l'ai essayé dans une petite app et semble fonctionner. Nous avons été à l'aide de la première depuis qu'il a été ce qui a été appris à nous avant. Mais maintenant, nous avons été confronté à des problèmes comme la stopPropagation ne fonctionne pas ou nous avons besoin de mettre à jour manuellement l'Enfant lors de l' shouldComponentUpdate déclencheurs sur les parents. Mais je n'ai pas vraiment vu de tous les documents au sujet de cette "manière préférée", seulement des exemples de différents tutoriels. Donc, si nous avons été à l'aide de la 2ème solution?
  • Oui, le 2ème est le meilleur choix. La Réagir docs et des exemples à ne pas utiliser JQuery. Les docs ont beaucoup de beaucoup d'info. facebook.github.io/réagir/docs/...
  • Eh bien, je pourrais l'ai toujours utilisé this.refs pour cela, j'ai rapidement écrit-il dans jQuery.
  • Il suffit de ne pas utiliser jQuery ou à tous le moins possible.. Tout le temps de manipuler le DOM, vous courez le risque de Réagir en le feuilletant sur vous. Généralement les coups des erreurs similaires à: unable to find component at root ''
InformationsquelleAutor index | 2015-04-28
  1. 60

    J'ai fourni un exemple qui suit votre deuxième approche. La mise à jour de l'état du composant est la meilleure façon d'afficher/masquer les enfants.

    Donné que vous avez ce conteneur:

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

    vous pouvez soit utiliser les technologies modernes de Javascript (ES6, premier exemple) ou classique JavaScript (ES5, deuxième exemple) pour mettre en œuvre la composante logique:

    Afficher/masquer les composants à l'aide de ES6

    Essayez cette démo live sur 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'));

    Afficher/masquer les composants à l'aide de ES5

    Essayez cette démo live sur 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);
    • C'est vraiment agréable. Je voudrais le mettre en œuvre. Cependant j'ai aussi besoin de retirer l'Enfant, si on clique sur d'autre que l'Enfant du composant. Pourriez-vous svp me guider comment?
    • Oui, j'ai demandé à here. Pourriez-vous s'il vous plaît aider moi. Je vous remercie.
    • C'est plus tard à l'aide de ES6 youtu.être/Mo2_UPkZjJU
    • Juste une remarque sur le ternaire something ? <Child /> : null, pourquoi ne pas utiliser something && (<Child />) à la place? Remarqué ça hier et je l'aime beaucoup
    • J'aime le && syntaxe de cette affaire, aussi.
    • Je suis nouveau à Réagir et à ne pas comprendre ce concept de base. Si <Child/> est un composant partagé entre plusieurs <Parents/>, avec cette conception, chaque parent pour la mise en œuvre de montrer et de cacher les méthodes de la création de tonnes de duplication de code. J'ai examiné à l'aide de refs dans mes projets pour éviter ce problème (this.child.current.hide()) toutefois, cela semble une mauvaise pratique. Avez-vous des solutions pour le problème de la duplication de code?
    • Vous pourriez avoir différents "Parent" composants de mettre en œuvre l'affichage/masquage de leurs enfants. Il existe différentes solutions pour éviter la duplication de code, mais dans ce cas, la mise en œuvre est si insignifiant que je préfère re-mettre en œuvre la présente afficher/masquer le comportement de l'Enfant contenant des composants parent.

    InformationsquelleAutor Lars Blumberg
  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();
}
}
    InformationsquelleAutor arvind grey