- 新しいコンテンツでデータが入力されたときに、含まれているdivのサイズが更新されます。

Question

WebアプリケーションにJSONデータを取り込みますが、含まれているdivはそのまま展開されません。

Reactはdivを展開する必要があると認識していません。ここに違反している部門のスクリーンがあります。

bodyタグを含むすべての親divの高さは100％です。私は必要なコードを投稿することができます。

関連するCSS

/* FRAME 
** 
** 
*/ 


html{ 
    height: 100%; 
    width: 100%; 
} 
body{ 
    height: 100%; 
    width: 100%; 
} 
#app{ 
    width: 100%; 
    height: 100%; 
} 
#contents{ 
    width: 100%; 
    height: 100%; 
} 
#top-1{ 
    position: fixed; 
    width: 100%; 
    height: 40px; 
    background: rgba(255, 255, 255, 0.8); 
    border-top: 3px solid #000000; 
    border-bottom: 1px solid #bbbbbb; 
    z-index: 1000; 
} 
#top-2{ 
    position: relative; 
    width: 90%; 
    height: 100%; 
    margin: 0 auto; 
    border-left: 1px dotted #888888; 
    border-right: 1px dotted #888888; 
} 
#container-1{ 
    position: relative; 
    display: inline-block; 
    width: 100%; 
    height: 100%; 
    top: 44px; 
} 
#container-2{ 
    position: relative; 
    width: 90%; 
    height: 100%; 
    margin: 0 auto; 
    border-left: 1px dotted #888888; 
    border-right: 1px dotted #888888; 
} 
.body{ 
    display: none; 
    position: relative; 
    width: 100%; 
    height: 100%; 
} 

Answer 1

これはcss問題のより多くのではなく、reactものです。
コードを投稿していないので、そこに何が入っているのかを確認するのは難しいです。
しかし、通常floatで子どもを流出させない限り、要素はデフォルトで拡張されますので、blockとinline-blockという要素が消費されます。

const Item = ({ name }) => { 
 
    return (
 
    <div className="item"> 
 
     <div className="item-name">{`Item - ${name}`}</div> 
 
     <div>{`This is just another line for item ${name}`}</div> 
 
    </div> 
 
); 
 
} 
 

 
const List = ({ items }) => { 
 
    return (
 
    <div className="list"> 
 
     { 
 
     items.map(o => { 
 
      return <Item name={o} /> 
 
     }) 
 
     } 
 
    </div> 
 
); 
 
} 
 

 
class App extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     items: [1, 2, 3] 
 
    }; 
 
    } 
 

 
    addItem =() => { 
 
    const {items} = this.state; 
 
    const nextItem = items.length + 1; 
 
    const nextState = [...items, nextItem]; 
 
    this.setState({items: nextState}); 
 

 
    } 
 

 
    render() { 
 
    const { items } = this.state; 
 
    return (
 
     <div className="main"> 
 
     <button onClick={this.addItem}>Add</button> 
 
     <List items={items} /> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<App />, document.getElementById("root"));

button{ 
 
    padding: 5px 20px; 
 
    font-size: 1.1em; 
 
    cursor: pointer; 
 
    background-color: #4285f4; 
 
    border:none; 
 
    box-shadow: 0 0 2px 1px #333; 
 
    color: #fff; 
 
    margin: 0 5px; 
 
} 
 

 
.main{ 
 
    border: 1px solid #ccc; 
 
    padding: 15px; 
 
    display: inline-block; 
 
} 
 

 

 
.item{ 
 
    box-shadow: 0 0 2px 1px #ccc; 
 
    padding: 15px; 
 
    margin: 10px 5px; 
 
    display: inline-block; 
 
    width: 20%; 
 
} 
 

 
.item-name{ 
 
    margin: 5px 0; 
 
    font-size: 1.2em; 
 
    font-weight: bold; 
 
    color: #34a853; 
 
    display: inline-block; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>