React-将jSON数据传递给子组件的子组件

Question

I am building an image grid which has three components: the parent Playlist.js component, inside which is the PlayListAlbumsList.js component, inside which resides the PlaylistAlbumInfoOverlay.js component.

I've got the PlaylistAlbumsList.js successfully loading images from my JSON file with their classNames and keys, but now I need to grab {list.albumTitle} and get that into the h1 of the PlaylistAlbumInfoOverlay.js component.

I'm not sure how to configure it. Here are the three components:

THE PARENT PLAYLIST COMPONENT:

import React from 'react';
import PlaylistAlbumsList from './PlaylistAlbumsList';

var data;
$.getJSON("./json/playlist.json", function(json){
    data = json;
});

var Playlist = React.createClass({

    getInitialState: function() {
    return {
      currentPlaylist: []
    };
  },

  componentDidMount: function() {
      var playlistImages = [];

      // Fake an AJAX request with a setTimeout function
      setTimeout(function(){ 
        playlistImages=data.images;

        // Set state when the request completes
        this.setState({
          currentPlaylist: playlistImages
        });

      }.bind(this), 10);
  },

  render() {
    return (
        <div id="playlist_page">
          <div className="grid-wrap">
            <PlaylistAlbumsList list={this.state.currentPlaylist} />
          </div>
        </div>
    )
  }

});

module.exports = Playlist;

THE CHILD UL COMPONENT:

import React from 'react';
import PlaylistAlbumInfoOverlay from './PlaylistAlbumInfoOverlay';

var PlaylistAlbumsList = React.createClass({

  render: function() {

    return (
      <ul className="container-fluid">
        {this.props.list.map(function(list){
          return (
            <li className={list.className} key={list.id}>
              <PlaylistAlbumInfoOverlay />
              <img src={list.src} width='100%' />
            </li>
          )
        }.bind(this))}
      </ul>
    )

  }
});

module.exports = PlaylistAlbumsList;

THE CHILD OF CHILD OVERLAY COMPONENT:

import React from 'react';

const PlaylistAlbumInfoOverlay = () => (

  <div className="playlist-album-info-overlay">
    <h2>{list.albumTitle}</h2> // doesn't work 
  </div>
);

PlaylistAlbumInfoOverlay.propTypes = {
  albumTitle: React.PropTypes.string // doesn't work
};

export default PlaylistAlbumInfoOverlay;

Answer 1

You're really close, just pass list in as a prop in the PlaylistAlbumsList file like so:

import React from 'react';
import PlaylistAlbumInfoOverlay from './PlaylistAlbumInfoOverlay';

var PlaylistAlbumsList = React.createClass({

  render: function() {

    return (
      <ul className="container-fluid">
        {this.props.list.map(function(list){
          return (
            <li className={list.className} key={list.id}>
              <PlaylistAlbumInfoOverlay list={list} /> // changed
              <img src={list.src} width='100%' />
            </li>
          )
        }.bind(this))}
      </ul>
    )

  }
});

module.exports = PlaylistAlbumsList;

And then access that as a prop in PlaylistAlbumInfoOverlay :

import React from 'react';

const PlaylistAlbumInfoOverlay = () => (

  <div className="playlist-album-info-overlay">
    <h2>{this.props.list.albumTitle}</h2> // changed 
  </div>
);

PlaylistAlbumInfoOverlay.propTypes = {
  albumTitle: React.PropTypes.string // doesn't work
};

export default PlaylistAlbumInfoOverlay;

Answer 2

When calling the child of the child component:

<PlaylistAlbumInfoOverlay title={list.albumTitle} />

And your PlaylistAlbumInfoOverlay:

const PlaylistAlbumInfoOverlay = ({ title }) => (
  <div className="playlist-album-info-overlay">
    <h2>{title}</h2>
  </div>
);

PlaylistAlbumInfoOverlay.propTypes = {
  title: React.PropTypes.string
};