Question

您好我正在实施一个带有反应的示例应用，我也在使用youtube api搜索并做出反应。

我的想法如下，我输入一个搜索词，例如“PS4”，这将调用 youtube api search ，并将以json格式返回5个匹配的结果。有了这个json，我会渲染一个包含视频，标题，描述的缩略图列表（类似于youtube网站）。如果我点击其中一个缩略图，想法是显示一个内部视频的模态对话框。这是问题，它总是加载相同的视频。

我省略了文件开头的导入

VideoList.js

   class VideoList extends React.Component {
    constructor(props) {
        super(props);
        this.openModal = this.openModal.bind(this);
        this.close = this.close.bind(this);
        this.state = {
            showModal: false
        }
    }

    openModal(video) {
        this.setState({ showModal: true });
    }
    close() {
        this.setState({ showModal: false });
    }

    render() {
        const videoItems = this.props.videos.map(video =>
            <Col xs={6} md={4}>
                <Thumbnail onClick={() => this.openModal(video)}
                    className="thumbnail"
                    src={video.snippet.thumbnails.default.url}
                    alt={video.snippet.description}
                    key={uid()}
                >
                    <h3>{video.title}</h3>
                    <p>{video.snippet.description}</p>
                    <hr />
                    <i>Date: {video.snippet.publishedAt}</i>
                    <VideoView show={this.state.showModal} video={video} close={this.close} />
                </Thumbnail>
            </Col>
        );
        return (
            <Grid>
                <Row>
                    {videoItems}
                </Row>
            </Grid>
        );
    }
}

export default VideoList;

VideoView.js

   const VideoView = props => {
    if (!props) {
        return <div>{'Could not load the video'}</div>
    }
    return (
        <div className="static-modal">
            <Modal show={props.show}>
                <Modal.Header>
                    <Modal.Title>{props.video.snippet.title}</Modal.Title>
                </Modal.Header>

                <Modal.Body>
                    One fine body...
                </Modal.Body>
                <Modal.Footer>
                    <Button onClick={() => props.close()}>Close</Button>
                </Modal.Footer>
            </Modal>
        </div>
    );
}

export default VideoView;

如果我点击其中一个缩略图，一个模态弹出窗口显示视频（它的一些信息，而不是视频本身），事情是它总是显示最后一个视频（列表中的最后一个）缩略图）

另一件事：我在这里面临设计问题，因为我认为我应该将 onclose 操作委托给模态对话框，在这种情况下， VideoView 然而，videoView组件是一个无状态组件，我只发送一些道具来呈现它，（检查onclose回调）。这是正确的方法吗？谢谢！

Answer 1

您创建了共享同一道具VideoView的多个this.state.showModal元素。这意味着当this.state.showModal为true时，您会立即显示所有模态，并且您只会看到其中一个位于顶部。创建一个VideoView元素并向其传递要显示的视频。同样要显示/隐藏模态，您可以检查this.state.video是否不等于null - 如果已分配值，则模态应该可见。

class VideoList extends React.Component {
    constructor(props) {
        super(props);
        this.openModal = this.openModal.bind(this);
        this.close = this.close.bind(this);
        this.state = {
            video: null
        }
    }

    openModal(video) {
        this.setState({ video: video });
    }
    close() {
        this.setState({ video: null });
    }

    render() {
        const videoItems = this.props.videos.map(video =>
            <Col xs={6} md={4}>
                <Thumbnail onClick={() => this.openModal(video)}
                    className="thumbnail"
                    src={video.snippet.thumbnails.default.url}
                    alt={video.snippet.description}
                    key={uid()}
                >
                    <h3>{video.title}</h3>
                    <p>{video.snippet.description}</p>
                    <hr />
                    <i>Date: {video.snippet.publishedAt}</i>
                </Thumbnail>
            </Col>
        );
        return (
            <div>
                <Grid>
                    <Row>
                        {videoItems}
                    </Row>
                </Grid>
                <VideoView show={this.state.video !== null} video={this.state.video} close={this.close} />
            </div>
        );
    }
}

export default VideoList;

模态没有显示正确的视频反应

1 个答案: