我比较了控制台或Materialize默认和我渲染的组件。

我想问题是，它没有继承carousel-item

的属性

类carousel-item应该在类carousel内部渲染。

<div className="carousel">
// These are supposed to be dynamic, below component is not present here
  <div className="carousel-item">
  </div>
</div>

我是如何尝试以这种方式呈现数据。

    renderAlbums(){
      return this.state.albums.map(album =>
          <Card song={album.name} singer={album.artist_name} src={album.cover_photo_url}/>
      );
    }

呈现数据<Card />（它包含carousel-item类），它应该放置包含carousel-item类的Card。

class Carousel extends Component {
    state = { albums: [] };
    componentWillMount() {
      axios.get('https://cors-anywhere.herokuapp.com/https://stg-resque.hakuapp.com/albums.json')
        .then(response => this.setState({albums: response.data}));
    }
    renderAlbums(){
      return this.state.albums.map(album =>
          <div className="carousel-item"><Card key={album.name} song={album.name} singer={album.artist_name} src={album.cover_photo_url}/></div>
      );
    }
  render() {
    return (
        <div className="carousel center">
          {this.renderAlbums()}
        </div>
    );
  }
}

export default Carousel;

这是我的卡片组件

class Card extends Component {
  render() {
    return (

        <div className="card z-depth-4">
          <div>
            <img src={this.props.src} />
          </div>
          <p>{this.props.song}</p>

          <div className="singer">{this.props.singer}</div>
        </div>
    );
  }
}
export default Card;

修改

Want that content to display like this.

但它没有像预期的那样运作。请建议我，我做错了什么？

Answer 1

首先，您的Carousel中没有任何内容表明哪个元素处于活动状态。您需要有一个指向活动元素的状态变量。

然后你只需要绘制[-2，-1,0,1,2]偏移与活动偏移。每张渲染的卡片需要知道哪种偏移量才能知道它们的风格。

Answer 2

在axios.get中，我看到您正在使用代理链接。

一个原因是，它可能会产生问题。

其他原因可能是您试图将carousel-item放入carousel。尝试将center类添加到carousel以及carousel-item。

检查这些是否有效。

使用React

我比较了控制台或Materialize默认和我渲染的组件。

2 个答案: