В моем приложении несколько компонентов Popover, я знаю, как обрабатывать состояние одного Popover компонент, используя что-то вроде этого:

class App extends Component {

  constructor(props) {
        super(props);
        this.state = { pop_open: false };
  }

  handleProfileDropDown(e) {
      e.preventDefault();
      this.setState({
          pop_open: !this.state.pop_open,
          anchorEl: e.currentTarget,
      });
    }

  handleRequestClose() {
      this.setState({
          pop_open: false,
      });
  };

  render() {
    return (
      <div>
        <button type="submit"  onClick={this.handleProfileDropDown.bind(this)} >My Customized PopOver</button>
        <Popover
            open={this.state.pop_open}
            anchorEl={this.state.anchorEl}
            onRequestClose={this.handleRequestClose.bind(this)}
        >
            {"content"}
        </Popover>
      </div>
    );
  }
}

Но для более чем одного Popover, я не знаю, как это сделать, должен ли я создавать состояние для каждого Popover? Извините за вопрос, но я новичок в мире интерфейсов.

Примечание: пожалуйста, не используйте крючки в своем ответе.

1
adnanmuttaleb 18 Ноя 2019 в 17:22

1 ответ

Внутреннее состояние - хороший вариант, когда только Компонент собирается его изменять. Он сохраняет логику простой и находится в одном блоке кода. С другой стороны, управление состоянием извне компонента позволяет другим компонентам считывать его значения и изменять их. Это распространенный подход при использовании Redux или Context, когда существует глобальное состояние приложения. Это состояние предназначено для свойств, которые необходимо читать / записывать нескольким компонентам.

Что использовать, когда это дизайнерское решение и зависит от каждой ситуации . На мой взгляд, каждый компонент должен обрабатывать свое собственное состояние, когда это возможно. Например, когда значения будут только изменены им или дочерним Компонентом. Наличие внешнего состояния имеет смысл, когда несколько компонентов собираются читать или изменять его, или когда значения состояния необходимо передать на несколько уровней в глубину иерархии.

В предлагаемом вами примере я вижу, что Popover работает с внутренним состоянием. Это может сработать, и вы можете использовать компонент несколько раз, и он будет нести всю логику внутри. Если вы переименуете Компоненты, вам будет легче понять, что я имею в виду. Я не знаю точно, как работает компонент с кнопкой, но я хочу прояснить объяснение:

class Popover extends Component {
    constructor(props) {
        super(props);
        this.state = { is_open: false };
    }

    open = () => {
        this.setState({
            is_open: true
        });
    }

    close = () => {
        this.setState({
            is_open: false
        });
    }

    toggle = () => {
        this.setState(prevState => ({
            is_open: !prevState.is_open
        }));
    }

    render() {
        return (
            <div>
                <button onClick={this.toggle}>
                    Open
                </button>
                {this.state.is_open && <PopoverContent />}
            </div>
        );
    }
}

Если вам нужны дополнительные объяснения или что-то неясно, дайте мне знать.

1
Alvaro 18 Ноя 2019 в 19:53
Взглянув на компонент, который вы связываете, я вижу, что это сбивает с толку. Способ обработки значения open (не в состоянии) зависит от anchorEl, который назначается элементу HTML кнопки при нажатии и null при закрытии.
 – 
Alvaro
18 Ноя 2019 в 18:51