使用React在Carousel中渲染组件

Question

I want to achieve a carousel like Materialize . Have an API from where I am fetching the data, so according to Materialize

I compared the console or Materialize default and my rendered components.

I guess the problem is, it's not inheriting the properties of carousel-item

---

Class carousel-item is supposed to Render inside of Class carousel .

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

How I am trying to render the data is in this manner.

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

Rendered the data <Card /> (It contains the class of carousel-item ), which is supposed to place Card containing class of carousel-item .

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;

This is my Card component

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;

EDIT:

• Want that content to display like this.

But it's not working the way it's expected. Please suggest me, what am I doing wrong?

Answer 1

First of all, there is nothing in your Carousel that says which element is active. You need to have a state variable that points to the active element.

Then you only need to draw [-2, -1, 0, 1, 2] offsets vs the active one. And each rendered card needs to know which offset to know their style.

Answer 2

In axios.get , I see that you are using proxy link.

One reason is, it can be creating problems.

---

Other reason can be you are trying to put carousel-item into carousel . Try adding center class to both ie carousel as well as carousel-item .

Check if these works.