【html】親要素-子要素の関係を考慮せずに作成したhtmlでハマった

reactでforでループしたtableを含むcomponentを表示しようと思ったのですが

思ったようにスクロールできずハマった点を復習します。

今回は会員さん一覧を表示するだけの処理です。

以下のような構成で作りました。

フレームワーク：cordova

ライブラリ：react

CSS：onsenUI

会員さん一覧を表示するtableを含んだコンポーネントを追加

下部にボタンも設置。

 render() { let list = []; for(var i = 0; i < Object.keys(obj).length; i++){ list.push(<UserListItem data={obj[i]} />); } return ( <Page> <LoginHeader title="会員情報更新" /> <div id="user-list-page"> <form onSubmit={this.searchItems}> <SearchInput placeholder='会員を検索する' value={this.state.searchWord} onChange={(e) => this.setState({ searchWord: e.target.value })} /> </form> { list } <Button className='deleteBtn'>会員を追加する</Button> {/*<ProgressCircular indeterminate />*/} </div> <FooterTab /> </Page> ); } 

const UserListItem = (props) => (
  <div id='user-item'>
    <div className="notes">
      <table>
        <tr><th>名前</th><td>{props.data.name}</td></tr>
        <tr><th>ふりがな</th><td>{props.data.nameKana}</td></tr>
        <tr><th>生年月日</th><td>{moment(props.data.birthday).format('YYYY年MM月DD日')}</td></tr>
      </table>
    </div>
  </div>
);
UserListItem.propTypes = {
  data: PropTypes.string.isRequired,
  /*
  deadline: PropTypes.bool,
  */
};

親コンポーネント部分の13行目のlistを表示している箇所が今回のお騒がせ部分になります。

ここに以下のようにdivを入れてしまい、スクロールの

際にヘッダーまで動いてしまう事態に陥りました。

<div className="hoge">
{ list }
</div>

本来なら親である<div id=”user-list-page”>のcssの影響を受けるはずだったのですが

divを余分に追加したことで親がhogeに変わりuser-list-pageに含まれるcssの

効果を受けなくなってしまったのが原因でした。

cssで装飾を細かくやってきたいとむやみにdivを入れたのがダメだったみたいです。

シンプルに親-子の関係を保ちつつ上手いことcssを追加するのが肝ですね。