在反应js中重新排序列表元素答案

【问题标题】：Reordering list element in react js在反应js中重新排序列表元素
【发布时间】：2017-06-13 20:08:59
【问题描述】：

我想知道如何重新排序列表元素。就像您有一个元素列表 li 并将最后一个元素放在第一位，就像第 10 位的索引将放在 0 的索引中

React.render(   <div>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li> //When an event fires, this item would go up to the first index   </div>,   document.getElementById('example') );

【问题讨论】：

任何sn-p？所以我们可以准确地理解上下文。
您是否构建了<li> 动态设置。即：来自模型（来自服务器的数据......等）？
重新排序包含您正在呈现的值数组的状态。
@LexphilCaraig：我只是给你一个相应的答案。 ..:)
@AbdennourTOUMI 我在那里看到了你的代码。如果它不仅要扭转它怎么办。如果它在中间并且您希望它放在首位怎么办。就像事件触发特定元素时的随机位置一样，该特定元素将放置在第一个索引处。任何想法？ :)

标签： reactjs reorderlist

【解决方案1】：

所以，我假设您有两个 React 组件：一个用于列表，另一个是主要组件 (App)，其中包括 list 以及反转列表的按钮。

class MyList extends React.Component {

  render() {
    return(
      <ul>
         {this.props.items.map((item ,key) => 
             <li key={key}> {item}</li>
          )}
      </ul>
    )
  }

}
MyList.defaultProps= {items:[]};


class App extends React.Component{
    
    state= {
        listItems: ['1', '2', '3', '4']
     };

    onClick(e) {
       e.preventDefault();
       this.setState({
         listItems: this.state.listItems.reverse()
       });
    }

    render() {
      return (
        <div>
          <div>
             <MyList items={this.state.listItems} />
          </div>
          <div> 
             <button onClick={this.onClick.bind(this)}>Reverse</button>
          </div>
        
        </div>
        
       )
    }
}

ReactDOM.render(<App /> ,  document.getElementById('example'))

<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>
<section id="example" />

【讨论】：

如果数组通过它的索引更新，比如索引 3 会转到索引 1，它应该相应地更新列表。
始终建议不要使用元素的索引作为关键道具：“如果项目的顺序可能发生变化，我们不建议使用索引作为键。这会对性能产生负面影响并可能导致问题与组件状态。” 见官方文档 -> reactjs.org/docs/lists-and-keys.html#keys

【解决方案2】：

根据您对 Abdennour 答案的评论（无论其位置如何，您都需要更新项目），您不能使用简单数字数组进行此类操作，您需要为您的值编制索引：

class MyList extends Component {

  render() {
    return(
      <ul>
         {this.props.items.map((item ,key) => 
             <li key={key}> {item}</li>
          )}
      </ul>
    )
  }

}


class App extends React.Component{

    constructor(props) {
      this.state= {
        listItems: [{id: 1, val: '1'}, {id: 2, val: '2'}, {id: 2, val: '2'}, {id: 3, val: '3'}]
      };
    }

    reverse = () => {
       this.setState({
         listItems: this.state.listItems.reverse()
       });
    }

    // You can ignore this, simple put some random value somewhere
    // In your case this would be the function that changes the value of one of the items, should of course be NOT random
    changeRandom = () => {
      const index = Math.floor(Math.random() * this.state.listItems.length);
      const newList = this.state.listItems.slice();
      newList[index] = Math.floor(Math.random() * 10).toString();

      this.setState({
        listItems: newList
      })
    }

    render() {
      return (
        <div>
          <div>
             <MyList items={this.state.listItems.map(item => item.val)} />
          </div>
          <div> 
             <button onClick={reverse}>Reverse</button>
          </div>
          <div> 
             <button onClick={changeRandom}>Random Change</button>
          </div>

        </div>

       )
    }
}

【讨论】：

是的！我想这解决了它。非常感谢！
你的key不应该是item.id而不是列表项索引吗？