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

我正在构建一个图像网格，它有三个组件：父Playlist.js组件，其中是playlayAlbumsList.js组件，其中驻留playlayAlbumInfoOverlay.js组件

我已经让playlayAlbumsList.js成功地从我的JSON文件加载了带有类名和键的图像，但是现在我需要抓取{list.albumTitle}，并将其放入playlayAlbumInfoOverlay.js组件的h1中

我不知道如何配置它。以下是三个组成部分：

父播放列表组件：

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;

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;

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;

从“React”导入React；
从“/playlayAlbumsList”导入playlayAlbumsList；
var数据；
$.getJSON（“./json/playlist.json”），函数（json）{
data=json；
});
var Playlist=React.createClass({
getInitialState:函数（）{
返回{
当前播放列表：[]
};
},
componentDidMount:function（）{
var-playlimages=[]；
//使用setTimeout函数伪造AJAX请求
setTimeout（函数（）{
playlimages=data.images；
//设置请求完成时的状态
这是我的国家({
当前播放列表：播放图像
});
}.绑定（本），10）；
},
render（）{
返回(
)
}
});
module.exports=播放列表；

子UL组件：

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;

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;

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;

从“React”导入React；
从“/playlayAlbumInfoOverlay”导入playlayAlbumInfoOverlay；
var playlayAlbumsList=React.createClass({
render:function（）{
返回(

{this.props.list.map（函数（list））{
返回(


)
}.bind（this））}

)
}
});
module.exports=播放列表；

子覆盖组件的子组件：

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;

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;

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;

从“React”导入React；
常量播放列表AlbumInfoOverlay=（）=>(
{list.albumTitle}//不起作用
);
playlayAlbumInfoOverlay.propTypes={
albumTitle:React.PropTypes.string//不起作用
};
导出默认播放列表信息覆盖；

您真的很接近，只需将

列表作为道具传递到
播放列表列表
文件中，如下所示：

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;

调用子组件的子组件时：

<PlaylistAlbumInfoOverlay title={list.albumTitle} />



以及您的播放列表：

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

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

const playlayAlbumInfoOverlay=（{title}）=>(
{title}
);
playlayAlbumInfoOverlay.propTypes={
标题：React.PropTypes.string
};
我不相信您可以在较新的const render方法中访问全局“this”。。。所以{这个。道具…等等}不起作用。