2

Gostaria de saber como faço pra destruir um componente com React ao clicar em um botão. Encontrei uma saída, porém na minha concepção é bem "gambiarrosa". Tenho um state chamado show e quando click em fechar modifico o valor do this.state.show para false, no método render() utilizo um if ternário para renderizar o componente ou não dependendo do valor this.state.show.

MyComponent.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import FontAwesome from 'react-fontawesome';

class MyComponent extends Component {

  constructor(props) {
    super(props);
    this.state = {
      show:true,
    };
  }

  closeComponent(){
      console.log("Destruir componente");
      var x = ReactDOM.findDOMNode(this);
      console.log(x);
      //ReactDOM.unmountComponentAtNode(this.container);
      this.setState({ show: false });
  }

  componentDidMount() {
  }

  componentWillUnmount() {
    clearInterval(this.state);
  }

  render() {
    return (
      this.state.show ?
      <div className="MyComponent">
        <h1>Mostrar componente</h1>
        <FontAwesome name="window-close-o" onClick={this.closeComponent.bind(this)}/>
      </div>
      : null
    );
  }

}

export default MyComponent;

Essa é realmente a única saída pro que eu preciso fazer?

ComponentFather.js

import React, { Component } from 'react';
import './ComponentFather.css';
import MyComponent from '../MyComponent/MyComponent'

class ComponentFather extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "Adicionar Categoria",
      key: 0,
      matchs: [],
    };
  }

  componentDidMount(){

  }

  componentWillUnmount(){
    clearInterval(this.state);
  }

  buttonClicked(){
    var mat = this.state.matchs;
    this.state.key ++;
    mat.push(<Match key={this.state.key}/>);
    console.log(mat);
    this.setState({
      matchs: mat
    });
  }

  render() {
    return (
      <div className="ComponentFather">
        <h1>Events Information</h1>
        <MyComponent></MyComponent>
        <MyComponent></MyComponent>
        <MyComponent></MyComponent>
      </div>
    );
  }
}

export default ComponentFather;

MainComponent

import React, { Component } from 'react';
//import logo from './logo.svg';
import './App.css';
import ComponentFather from '../ComponentFather/ComponentFather';
import Streaming from '../Streaming/Streaming';

//import {Grid, Row, Col, Clearfix} from 'react-bootstrap';

class App extends Component {
  render() {
    return (
      <div className="App">
        <ComponentFather />
        <Streaming />
      </div>
    );
  }
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';

import App from './components/App/App';

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/css/bootstrap-theme.css'

ReactDOM.render(
  <App />,
  document.getElementById('main-container')
);
8
  • 1
    Vi agora o teu edit. Dá-me ideia que o teu código é adaptado e não o código real. Duas perguntas: Esses MyComponent são sempre 3 ou isso é dinâmico? Outra pergunta, o ComponentFather sabe o estado de cada MyComponent?
    – Sergio
    Commented 17/11/2016 às 21:15
  • Coloquei os 3 amarrados apenas para ter uma representação de como vai ser, mas o correto é ser dinâmico. Quanto a sua outra pergunta eu não sei responder. Iniciei os estudos no React esses dias, to devorando a documentação pra vê se clareia mais as coisas. A ideia é a seguinte, o ComponentFather vai carregar uma lista de objetos do backend e pra cada objeto da lista eu vou criar um MyComponent passando o objeto como parametro, as propriedades do objeto serão todas exibidas no MyComponent e dentro do MyComponent vou ter a opção de destruir aquele componente ao clicar em um determinado botão....
    – LuKs Sys
    Commented 18/11/2016 às 11:36
  • Ok. Se o ComponentFather guardar o estado de cada MyComponent ele saberá se deve mostrar ou não um dado MyComponent. Essa parece-me a maneira mais correta. Estás a usar flux? Mobx? nenhum deles? Daqui a pouco vou dar um exemplo para ver se é isso que procuras
    – Sergio
    Commented 18/11/2016 às 11:39
  • Por enquanto ainda estou apenas na parte estática mas pretendo utilizar o flux, pelo que li até agora me aprece o mais viável. Porém tenho que pesquisar um pouco mais fundo porque a comunicação vai ser via socket. Pelo que vi na sua resposta é justamente isso que preciso. Muito obrigado pela força que você ta me dando. Só mais outra coisa... Tem algum material que você recomenda pra turbinar meu aprendizado a cerca do React?
    – LuKs Sys
    Commented 18/11/2016 às 11:43
  • Dá uma olhada aqui entretanto: youtube.com/watch?v=Wsg3aSvPCXE
    – Sergio
    Commented 18/11/2016 às 11:44

1 Resposta 1

3

A maneira de desmontar um componente é com ReactDOM.unmountComponentAtNode. Esse método aceita o elemento DOM em que o componente está montado. Se não tens uma referência do elemento podes passar ReactDOM.findDOMNode(this).parentNode como argumento.

Assim o teu método para destruir o componente poderia ser:

closeComponent() {
    console.log("Destruir componente");
    var container = ReactDOM.findDOMNode(this).parentNode;
    ReactDOM.unmountComponentAtNode(container);
}

Se esse componente estiver inserido noutro, o melhor seria esconder o elemento via componente pai. Dependendo da lógica por detrás do state do componente.

No teu caso, como estás a fazer é válido, dessa maneira o componente MyComponent fica responsável de guardar o seu próprio estado. E ficaria assim: https://jsfiddle.net/5gjapobx/

4
  • Não rolou... warning.js:36 Warning: unmountComponentAtNode(): The node you're attempting to unmount was rendered by React and is not a top-level container. Instead, have the parent component update its state and rerender in order to remove this component.
    – LuKs Sys
    Commented 17/11/2016 às 11:17
  • @LuKsSys pensava que era um componente isolado, assim preciso que mostres o componente onde esse está inserido para ajudar...
    – Sergio
    Commented 17/11/2016 às 11:18
  • Vou editar o código acima e mostrar o código onde ele está inserido
    – LuKs Sys
    Commented 17/11/2016 às 11:22
  • 1
    Agradeço pelo ajuda, resolveu meu problema.
    – LuKs Sys
    Commented 21/11/2016 às 11:50

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .