Max React Sec9 メモ

###99

・stateは一つのelementに従属するので,rootelementが必要になる。

・配列でreturnすることもできるが、keyが要求される

・解決する方法はchildrenを返すだけのカスタムコンポーネントを作る

const Wrapper = props => {
  return props.children;
};

export default Wrapper;

・またはReact.Fragmentを使う（同じ）
で囲む

###103
・css的にはmodalのelementは全体のaboveであるべきだが上のやり方ではできない。

・なんとindex.htmlにroot divを追加する

<div id="backdrop-root"></div>
<div id="overlay-root"></div>
<div id="root"></div>

・さらにreactDom使ってしていしてreturnする
デフォルトだとid root内にrenderされるのを指定して強制してる感じかな

import ReactDOM from 'react-dom';

const Backdrop = props => {
  return <div className={classes.backdrop} onClick={props.onConfirm} />;
};

const ModalOverlay = props => {
  return (
    <Card className={classes.modal}>
      <header className={classes.header}>
        <h2>{props.title}</h2>
      </header>
      <div className={classes.content}>
        <p>{props.message}</p>
      </div>
      <footer className={classes.actions}>
        <Button onClick={props.onConfirm}>Okay</Button>
      </footer>
    </Card>
  );
};

const ErrorModal = (props) => {
  return (
    <React.Fragment>
      {ReactDOM.createPortal(
        <Backdrop onConfirm={props.onConfirm} />, 
        document.getElementById('backdrop-root')
      )}
    </React.Fragment>
  );
}

export default ErrorModal;