javascript - React - persist element across parents -


is there way avoid unmounting/remounting element when moved between parents?

i have tried applying relevant keys elements, since keys sibling-unique has little impact.

class item extends react.component {    constructor(props) {      super(props);      console.log("a new item created");    }    componentdidmount() {      console.log("i mounted");    }    componentwillunmount() {      console.log("i unmounted");    }      render() {      return (        <li>item</li>      );    }  }    class app extends react.component {    constructor(props) {      super(props);      this.state = {        itemlist: 0      };    }      componentdidmount() {      setinterval(        this.picknewlist.bind(this),      2500);    }      picknewlist() {      let newlist;      {        newlist = math.floor(math.random() * 3);      } while (newlist === this.state.itemlist);      console.log(`moving item ${this.state.itemlist} ${newlist}`);      this.setstate({        itemlist: newlist      });    }      render() {      const uls = [...array(3)].map((v, i) => {        return (          <ul key = {i}>            <li>non-item</li>            {this.state.itemlist === ?              <item key="item" />              : undefined}             <li>non-item</li>          </ul>        );      });      return (        <div>          {uls}        </div>      );    }  }    reactdom.render(( <    app / >  ), document.getelementbyid("app"));
<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="app"></div>

in specific use case looking animate movement using react-flip-move, since element unmounted/remounted every time, not registered move.


Comments

Popular posts from this blog

python - Operations inside variables -

Generic Map Parameter java -

arrays - What causes a java.lang.ArrayIndexOutOfBoundsException and how do I prevent it? -