Question

我正在构建一个包含三个组件的图像网格：父Playlist.js组件，其中是PlayListAlbumsList.js组件，其中包含PlaylistAlbumInfoOverlay.js组件。

我已经使用他们的classNames和键成功地从我的JSON文件加载了PlaylistAlbumsList.js，但现在我需要获取{list.albumTitle}并将其放入PlaylistAlbumInfoOverlay.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;

儿童UL组件：

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;

Answer 1

您真的很接近，只需将list作为PlaylistAlbumsList文件中的道具传递给您：

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中访问它作为道具：

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

调用子组件的子项时：

<PlaylistAlbumInfoOverlay title={list.albumTitle} />

你的PlaylistAlbumInfoOverlay：

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

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

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

2 个答案: