小编Nik*_*kiy的帖子

在IE11中,不会从正常流程中删除绝对定位的弹性项目

我们有两个带内容的div和第三个div,它是具有绝对位置的背景.

Container是一个flexbox.

一切都在Chrome和Safari中运行良好,但~~Firefox和~~ IE11在绝对定位div中起作用,并在div之间分配空间,就像连续有3个div一样.

我做了jsfiddle的例子.有没有办法解决这个错误？ https://jsfiddle.net/s18do03e/2/

div.container {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 300px;
  justify-content: space-between;
  width: 100%;
  outline: 1px solid;
}
div.c1 {
  background: #aaeecc;
  width: 100px;
  position: relative;
  z-index: 50;
  top: 20px;
  display: flex;
}
div.c2 {
  background: #cceeaa;
  width: 200px;
  position: relative;
  z-index: 50;
  top: 20px;
  display: flex;
}
div.bg {
  background: #ccc;
  width: 100%;
  height: 100%;
  z-index: 0;
  left: 0px;
  top: 0px;
  position: absolute;
  display: flex;
}

Run Code Online (Sandbox Code Playgroud)

<div class="container">
  <div class="c1">Content 1</div>
  <div …

Run Code Online (Sandbox Code Playgroud)

html css css3 flexbox internet-explorer-11

Nik*_*kiy

2018 01-09

28
推荐指数

3
解决办法

2万
查看次数

如何在不使用React重新呈现整个列表的情况下添加新元素

我正在研究简单的流应用程序.我有帖子列表,此列表可以接收更新,这些更新将显示在其上.

问题出现在每个新帖子上,React会重新呈现整个元素列表.我为它做了一个简单的例子.

有什么方法可以避免这种行为吗？我已经在React docs上看到了动态子主题,但是在例子中,正如你所看到的,无论如何我都会更新所有孩子.

class Post extends React.Component {
  render() {
    console.log('rerendered post', this.props.reactKey);
    return (
      <li>{this.props.post.text}</li>
    );
  }
}

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {posts: [
      {id: '00001', text: 'First one'},
      {id: '00002',text: 'Second one'},
      {id: '00003',text: 'Third one'}
    ]};
  }

  addPost() {
    const posts = this.state.posts;
    posts.unshift({id: '00004', text: 'New post'});
    this.setState({posts: posts});
  }

  render() {
    return (
      <div>
        <button onClick={this.addPost.bind(this)}>Add Post</button>
        <ul>
          {this.state.posts.map((post, index) => {
            return (<Post post={post} key={post.id} …

Run Code Online (Sandbox Code Playgroud)

javascript dom reactjs

Nik*_*kiy

2016 08-23

7
推荐指数

1
解决办法

4687
查看次数