Управление диалогом HTML5 в React

Question

Я пытаюсь создать простой диалог конфигурации с иконкой закрытия в правом верхнем углу, но не могу придумать, как это сделать в React.В других средах я могу просто использовать селектор, а затем использовать .showModal () / close (), чтобы открыть / закрыть диалог.Тем не менее, я думаю, что мы не можем или не рекомендуем напрямую манипулировать DOM в React, поэтому мне интересно, как в этом случае поступить правильно.

Мой план проекта

Приложение.js

class App extends Component {
  ...
  ...
  return(
    <div>
      <ConfigPage />
      <ConfigButton />
      <MainContents />
    </div>
  )
}

Я хочу открыть диалоговое окно <ConfigPage />, нажав кнопку <ConfigButton />, которую я установил, и закрыть его, нажав значок в диалоговом окне.

config-page.js

class ConfigPage extends Component {
  ...
  ...
  return(
    <dialog>
      <header>
        <div>
          <i onClick={someCallback}></i>               
        </div>
      </header>
      <section></section>
    </dialog>
  )
}

Answer 1

диалог HTML5 также имеет атрибут open, правильно?Вместо вызова show / hide вы можете манипулировать этим атрибутом -

class ConfigPage extends Component {
  ...
  ...
  return(
    <dialog open={this.state.showDialog ? 'open' : false}>
      <header>
        <div>
          <i onClick={someCallback}></i>               
        </div>
      </header>
      <section></section>
    </dialog>
  )
}

А когда вы хотите показать / скрыть вызов this.setState({showDialog: true}) (или false)

Вот скрипка js с проверкой концепции: https://jsfiddle.net/n5u2wwjg/193969/

Answer 2

Добро пожаловать на SO.Вы можете скрыть реагирующий компонент, вернув null из функции render.Вы можете определить флаг в state, который определяет погоду или не виден ваш компонент.Вот простой пример.

class Modal extends Component {

  constructor(props) {
    super(props);
    this.state = {
      isOpen: true;
    };
    this.onCloseClick = this.onCloseClick.bind(this);
  }


  onCloseClick(e) {
    e.preventDefault();
    this.setState({
      isOpen: false,
    });
  }


  render(){
    if (!this.state.isOpen) return null;
    return (
      <div>
        <button onClick={this.onCloseClick}>
          Close
        </button>
        <h1>What up, this a modal</h1>
      <div>
    );
  }

}