Как безопасно размонтировать компонент в React?

Question

[Артем]

По клику по кнопке в одном компоненте, удаляю компонент в родительском таким кодом:

// componentA.jsx
class ComponentA extends React.PureComponent {
  removeB() {
    this.setState({ mounted: false })
  }

  renderB() {
    if (!this.state.mounted) {
      return null
    }
    return <ComponentB />
  }

  render() {
    return <div>
      {this.renderB()}
      <ComponentC onClick={this.removeB} />
    </div>
  }
}

// componentB.jsx
class ComponentB extends React.PureComponent {
  render() {
    return // Какой-то контент
  }
}

// componentC.jsx
class ComponentC extends React.PureComponent {
  render() {
    return <Button onClick={this.props.onClick} />
  }
}

Получаю ошибку:
Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

Comments

[Medin K]

Еще не видел такого.
Чем вам условный рендеринг не подошел?

[Артем]

Medin K, какой условный рендеринг?
Проблема в том, что источник события, из-за которого меняется условие рендерить компонент или нет, находится не в том компоненте, в котором находится компонент.
Если вынести кнопку из componentC в componentA, то работать будет
UPD. Пример не совсем правильный
Должно быть так:

// componentA.jsx
class ComponentA extends React.PureComponent {
  removeB() {
    this.setState({ mounted: false })
  }

  renderB() {
    if (!this.state.mounted) {
      return null
    }
    return <ComponentB />
  }

  render() {
    return <div>
      {this.renderB()}
      <ComponentC onClick={this.removeB} />
    </div>
  }
}

// componentB.jsx
class ComponentB extends React.PureComponent {
  render() {
    return // Какой-то контент
  }
}

[Medin K]

Артем, извиняюсь
глаза под вечер замылены так сказать

https://codesandbox.io/s/6w9oy2qkk

this.removeB = this.removeB.bind(this); // добавил bind

и
компонент ComponentB у вас ничего не возвращает
надо хотябы null

[Артем]

Medin K, так и делаю. Сейчас даже перенес логику в codesandbox и оно работает. Буду дальше искать источник проблемы.

Answer 1

[Антон Спирин]

class ComponentA extends React.PureComponent {
  state = { isMounted: true };

  removeB = () => {
    this.setState({ isMounted: false });
  };

  render() {
    const { isMounted } = this.state;

    return (
      <div>
        {isMounted && <ComponentB />}
        <ComponentC onClick={this.removeB} />
      </div>
    );
  }
}

Answer 2

[Дима]

Правильнее это делать так:

// componentA.jsx
class ComponentA extends React.PureComponent {
    state = {
        mounted: false
    }

    removeB = () => {
        this.setState({ mounted: !this.state.mounted })
    }

    render() {
        let { mounted } = this.state
        return <div>
            {
                (mounted) ? <ComponentB /> : <ComponentC onClick={this.removeB} />
            }
        </div>
    }
}


// componentB.jsx
class ComponentB extends React.PureComponent {
    render() {
        return <div>ComponentB</div>
    }
}

// componentC.jsx
class ComponentC extends React.PureComponent {
    render() {
        return <button onClick={this.props.onClick}>ComponentC click me</button>
    }
}

Comments

[Артем]

А в чем отличие?