如何使用React语句属性移动DIV元素

Question

我正在启动一个音乐轨道应用程序，然后在react中创建了2个跟踪列表。我也确实创建了一个轨道元素，其中有一个按钮可以将OnClick移至曲目列表到另一个。

对我来说不幸的是，经过几次尝试，我无法弄清楚如何进行更新以将此曲目元素移至其他列表。

这是我在github中的代码

https://github.com/erwanriou/jamming/tree/master/src/components

和一个可能与错误的两个元素有关的摘录：

跟踪列表

import React from 'react';
import './TrackList.css';
import Track from '../track/Track.js';

class TrackList extends React.Component {
  constructor(props) {
    super(props);
    this.state = { position: 0 }
    this.onClick = this.onClick.bind(this);
  }
  onClick() {
    this.setState({ position: (this.state.position + 1) % 2 })
  }
  render() {
    return (
      <div className="TrackLists">
        <div className="TrackList1">
          <div className="TrackListTitle">
            <h2>Results</h2>
          </div>
          <div className="TrackListcontent">
            { this.state.position === 0 ? <Track onClick={this.onClick}/> : ''}
          </div>
        </div>
        <div className="TrackList2">
          <div className="TrackListTitle">
            <h2>NewPlaylist</h2>
          </div>
          <div className="TrackListcontent">
            { this.state.position === 1 ? <Track onClick={this.onClick}/> : ''}
          </div>
        </div>
      </div>
    );
  }
}
export default TrackList;

跟踪

import React from 'react';
import './Track.css'
class Track extends React.Component {
 render() {
    let trackName = "Sweet Disposition";
    let trackAlbum = "The Temper Trap";
    let trackArtist = "Bootleg";
    return (
      <div className="track">
        <div className="trackText">
          <h2>{trackName}</h2>
          <p>{trackAlbum} - {trackArtist}</p>
        </div>
        <i onClick={this.props.onClick} className="fas fa-plus"></i>
      </div>
    );
  }
}
export default Track;

Answer 1

我认为您需要花点时间重新考虑您的方法。针对问题的更面向对象的方法意味着您有两个轨道列表组件，并且一个按钮可以将轨道从一个跟踪列表组件移动到另一个轨道列表组件。在引擎盖下，您可能会将一个曲目组件从一个TrackListComponent中的一个数组移动到另一个TrackListComponent的相应数组...