Question

我正在开始一个音乐曲目应用程序，我在React中创建了2个曲目列表。我也创建了一个Track元素，其中有一个按钮，可以将onClick移动到另一个跟踪列表。

不幸的是，经过多次尝试后，我无法确定如何更新语句以便将此Track元素移动到其他列表。

这是我在Github的代码

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

以及可能与bug有关的2个元素的摘录：

曲目列表

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;

TRACK

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

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

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

1 个答案: