javascript - 如果没有 React-hooks 并使用类组件而不是功能组件，这个 React 代码会是什么样子？(打开附加窗口的按钮)

Question

我刚刚通过 YouTube 类(class)学习了 React，所有类(class)都是基于类和通常的 this.setState 构建的，没有钩子(Hook)。如果没有 React-hooks 并使用类组件而不是函数组件，这个 React 代码会是什么样子？代码本身实现了单击按钮时弹出一个窗口

react :

const Modal = (props) => {
  const onClick = e => {
    if (e.target.classList.contains('close') || !e.target.closest('.modal-content')) {
      props.close();
    }
  }

  return (
    <div className="modal" onClick={onClick}>
      <div className="modal-content">
        <span className="close">&times;</span>
        {props.children}
      </div>
    </div>
  );
};

const App = () => {
  const [ opened, setOpened ] = React.useState(false);

  const open = () => setOpened(true);
  const close = () => setOpened(false);

  return (
    <div>
      <h2>Modal Example</h2>
      <button onClick={open}>Open Modal</button>
      {opened && <Modal close={close}>hello, world!!</Modal>}
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('app'));

完整代码以及index.html和index.css文件位于链接:

https://jsfiddle.net/zuscf0wo/

Answer 1

Modal 组件不需要任何更改，因为它不使用钩子(Hook)。

App 组件将这样编写:

class App extends React.Component {
  state = {
    opened: false,
  };

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

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

  render() {
    return (
      <div>
        <h2>Modal Example</h2>
        <button onClick={this.open}>Open Modal</button>
        {this.state.opened && <Modal close={this.close}>hello, world!!</Modal>}
      </div>
    );
  }
}