onclick 重新加载另一个组件 ReactJS

Question

所以我试图构建的是一个媒体播放器，当一个人想要听 mp3 文件时可以重新加载它。

基本上这个概念是这样的

media-player.js - 显示标题和艺术家以及专辑封面

program.js 有一个按钮 (LISTEN)，然后在 media-player.js 中呈现并传递道具（如艺术家、歌曲和专辑封面）

如果媒体播放器已经呈现，我需要它重新呈现。

我不知道如何实现这一点我已经创建了我的 media-player.js 但每次我点击 Programs.js 中的一个按钮时，因为它已经加载，它不会删除和重新加载。

媒体播放器.js

import React from 'react';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import Fade from '@material-ui/core/Fade';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import IconButton from '@material-ui/core/IconButton';
import Typography from '@material-ui/core/Typography';
import SkipPreviousIcon from '@material-ui/icons/SkipPrevious';
import PlayArrowIcon from '@material-ui/icons/PlayArrow';
import SkipNextIcon from '@material-ui/icons/SkipNext';
import Fab from '@material-ui/core/Fab';
import Event from "../../tracker.js";

const useStyles = makeStyles(theme => ({

      fab: {
        position: 'fixed',
        zIndex:999,
        backgroundColor:'#b71c1c',
        bottom: theme.spacing(2),
        right: theme.spacing(2),
        "&:hover, &:focus":{
          background:'black',
        }
      },
  card: { 
    position: 'fixed',
    zIndex:999,
    bottom: theme.spacing(2),
    left: theme.spacing(2),
    display: 'flex',
    maxWidth:'300px',
  },
  details: {
    display: 'flex',
    flexDirection: 'column',
  },
  content: {
    flex: '1 0 auto',
  },
  cover: {
    width: 151,
  },
  controls: {
    display: 'none',
    alignItems: 'center',
    paddingLeft: theme.spacing(1),
    paddingBottom: theme.spacing(1),
  },
  playIcon: {
    height: 38,
    width: 38,
  },
}));

function MediaControlCard(props) {
  const classes = useStyles();
  const theme = useTheme();

  return (
    <Card className={classes.card}>
      <CardMedia
        className={classes.cover}
        image="//storage.googleapis.com/radiomediapodcast/budcast/BudCast.png"
        title="Live from space album cover"
      />
      <div className={classes.details}>
        <CardContent className={classes.content}>
          <Typography id="Now_Playing_Title" component="h5" variant="h5">
            {props.artist}
          </Typography>
          <Typography id="Now_Playing_Artist" variant="subtitle1" color="textSecondary">
             {props.song}
          </Typography>
        </CardContent>
        <div className={classes.controls}>
          <IconButton aria-label="previous">
            {theme.direction === 'rtl' ? <SkipNextIcon /> : <SkipPreviousIcon />}
          </IconButton>
          <IconButton aria-label="play/pause">
            <PlayArrowIcon className={classes.playIcon} />
          </IconButton>
          <IconButton aria-label="next">
            {theme.direction === 'rtl' ? <SkipPreviousIcon /> : <SkipNextIcon />}
          </IconButton>
        </div>
      </div>

    </Card>
  );
}

程序.js

    import React from 'react';
import {Helmet} from "react-helmet";
import MuiThemeProvider from "@material-ui/core/styles/MuiThemeProvider";
import LinearProgress from '@material-ui/core/LinearProgress';
import Container from '@material-ui/core/Container';
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';
import MediaControlCard from './modul/media-player.js';

import theme from "../theme";
import { Card } from '@material-ui/core';



function PodcastCard(props){

  const handleClick = e => { 
   return( 
    <MediaControlCard title={props.title} song={props.song} /> );
  }


  return (
    <Card>{props.title}
    <button onClick={handleClick}>click me</button>
    </Card>
  );
}

export default class programs extends React.Component {


    state = {
       error: null,
      isLoaded: false,
      items: []
    }



      componentDidMount () {
        const { name } = this.props.match.params
        //console.log(name);
        fetch(`https://api.drn1.com.au/api-access/programs/${name}`)
        .then(res => res.json())
        .then(
          (result) => {
            this.setState({
              isLoaded: true,
              items: result.programs
            });

          },
          // Note: it's important to handle errors here
          // instead of a catch() block so that we don't swallow
          // exceptions from actual bugs in components.
          (error) => {
            this.setState({
              isLoaded: true,
              error
            });
          }
        );



    }
    _onReady(event) {
      // access to player in all event handlers via event.target
      event.target.pauseVideo();
    }

    render() {
      const { error, isLoaded, items } = this.state;
     // console.log(items.title);

      if (error) {
        return <div>Error: {error.message}</div>;
      } else if (!isLoaded) {
        return <Container> <LinearProgress color="secondary"  /></Container>;
      } else {

       // const adblock = document.getElementById("wrapfabtest").offsetHeight;
       console.log(items);
       console.log(items[0].title);
        return (
            <MuiThemeProvider theme={theme}>
                <Helmet>
                    <meta charSet="utf-8" />
                    <title>{items[0].title} :: DRN1</title>
                    <link rel="canonical" href={document.location} />
                    <meta name="description" content={items[0].description} />
                    <meta name="robots" content="index,follow" />

                </Helmet>
                <Container>

                <Grid container spacing={3}>

                  <Grid item lg={12} xs={12}>
                    <img src={items[0].banner} style={{width:'100%', height:'auto'}}/>
                  </Grid>
               </Grid>
                  <Grid container lg={12} xs={12} spacing={3}>
                    <Grid item lg={8} xs={12}>
                    <Paper id="article" className="root">
                        <Typography variant="h5" component="h5">
                        {items[0].title}
                        </Typography>
                    </Paper>
                    {items[0].episode.map(item => (
                     <PodcastCard title={item.title}/>
                    ))}
                    </Grid>
                    <Grid item lg={4} xs={12}>
                    <Paper id="article" className="root">
                        <Typography variant="h5" component="h5">
                        Other Podcasts
                        </Typography>
                    </Paper>


                    </Grid>
                </Grid>

              </Container>
              </MuiThemeProvider>
        );
      }
    }
    }

Answer 1

不确定我是否完全理解了代码，但我认为它无法重新渲染，因为您没有更改 MediaControlCard 的道具。 MediaControlCard 也缺少道具艺术家。

 const handleClick = e => { 
   return( 
    //THESE PROBS DOES NEVER CHANGE, THEREFORE MediaControlCard does never update
    <MediaControlCard title="1one " song="test" artist="Missing artist" /> );
  }