Question

我的应用程序具有多个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创建一个状态？很抱歉这个问题，但是我对前端世界是陌生的。

注意：请不要在答案中使用钩子。

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

如果您需要进一步的解释或不清楚的地方，请告诉我。

如何处理多个材质用户界面Popover [React.js]？

1 个答案: