javascript - --React 在被新内容填充时会更新包含的 div 的大小

Question

我用 JSON 数据填充我的网络应用程序，但包含的 div 没有按应有的方式扩展。

我不认为 React 知道 div 应该扩展。这是有问题的 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 问题。
您没有发布任何代码，因此很难确定其中发生了什么。
但一般来说，block 和 inline-block 元素默认会随着内容的增长而扩展(除非你用 float 例如)。
这是一个小例子:

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>