Question

我想创建一个引导模式弹出窗口，其中将包含特定单击的div的信息。我怎样才能使模态中包含该特定项目的所有数据？

我已经尽力使从MovieList传递的数据进一步向下传递给模态组件，但始终只显示列表中的第一项。

所以我有3个组成部分。一个MoviesList，它遍历从api传来的电影数组，该API为该数组中的每个电影呈现一个Movie组件。然后，我有了这个MovieModal，可以容纳所单击的电影数据。

MovieList.jsx

import React from 'react';
import Movie from './Movie.jsx';

export default ({collection}) =>  (
    <div className='container'>
        <div className='row'>
            <div className='panel-group'>
                {collection.map(movie => (
                        <Movie data={movie} key={movie.id} />
                ))}
            </div>
        </div>
    </div>
);

Movie.jsx

import React, { Fragment } from 'react';
import gen from '../../assets/genres.js';
import { IMG_URL } from '../../assets/api_bits.js';
import MovieModal from './MovieModal.jsx';

export default ({data}) =>  (
    <Fragment>
        <div 
            className='panel'
            type='button'
            data-toggle='modal'
            data-target='#myModal'
        >
            <img className="panel-img" src={`${IMG_URL}` + data.poster_path} alt={data.title} />
            <div className="panel-body">
                <h3 className='panel-title'>
                    { (data.title || data.original_name).length >= 24 
                        ? (data.title || data.original_name).slice(0, 24).concat('...') 
                        : data.title || data.original_name }
                </h3>
                <h4 className="panel-genres">
                    {gen.map (genre => (
                        data.genre_ids.includes(genre.id) 
                            ? `${genre.name}\xa0\xa0` 
                            : null
                    ))}
                </h4>
                <h5 className="panel-rating">
                    <p>
                        <i className="fas fa-heart"></i>
                        &nbsp;
                        <span>{data.vote_average}</span>
                    </p>
                </h5>
            </div>

            <MovieModal />
        </div>
    </Fragment>
)

MovieModal.jsx

import React from 'react';

export default () => (
    <div className='modal fade' id='myModal'>
        <div className='modal-dialog modal-lg'>
            <div className='modal-content'>
                ...
            </div>
        </div>
    </div>
);

如何使引导程序模态包含项目列表中特定单击项目（div容器）的道具？

0 个答案: