需要創建一個新的隱藏 div，在點擊后顯示

Question

我有一個顯示體驗的組件。 我想創建一個選項，在我的體驗之上顯示一個框，其中包含當他們單擊體驗時可以執行的不同選項。 我對每種體驗都有不同的選擇。

這是我的經歷

我想用每個體驗的相應圖像創建一個這樣的框。

這是我的經驗組件

    import React, { memo, useCallback } from 'react';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/styles';
import Typography from '@material-ui/core/Typography';
import clsx from 'clsx';

import Popper from '@material-ui/core/Popper';
import gastronomia from 'assets/experiences/gastronomia.jpg';
import productos from 'assets/experiences/productos.jpg';
import giftcard from 'assets/experiences/giftcard.jpg';
import diversion from 'assets/experiences/diversion.jpg';
import deporte from 'assets/experiences/deporte.jpg';
import belleza from 'assets/experiences/belleza.jpg';
import gastronomiaExperiences from 'data/gastronomia';
import productosExperiences from 'data/productos';
import giftcardExperiences from 'data/giftcard';
import diversionExperiences from 'data/diversion';
import deporteExperiences from 'data/deporte';
import bellezaExperiences from 'data/belleza';

// Proptypes definitions to the component.
const propTypes = {
  /** Custom root className. */
  className: PropTypes.string,
};

// Default props definitions.
const defaultProps = {
  className: null,
};

// Component's styles
const useStyles = makeStyles(theme => ({
  root: {
    display: 'block',
    margin: '0 auto',
    maxWidth: '50%',
    [theme.breakpoints.down('md')]: {
      maxWidth: '70%',
    },
    [theme.breakpoints.down('sm')]: {
      maxWidth: '100%',
    },
    '& .experiences-column': {
      display: 'inline-block',
      verticalAlign: 'top',
      textAlign: 'center',
      '&.col1': {
        width: '36.31%',
        [theme.breakpoints.down('sm')]: {
          width: 'initial',
        },
      },
      '&.col2': {
        width: '63.69%',
        [theme.breakpoints.down('sm')]: {
          width: 'initial',
        },
      },
      '& .experience': {
        padding: 2,
        position: 'relative',
        '& img': {
          width: '100%',
          display: 'block',
        },
        '& .experience-title': {
          position: 'absolute',
          bottom: 30,
          left: 0,
          right: 0,
          textAlign: 'center',
        },
      },
    },
  },
}), { name: 'ExperiencesStyle' });



/**
 * Component used to render a grid of experiences.
 *
 * @param {object} props - The component's props.
 * @returns {object} React element.
 */
const Experiences = memo(
  (props) => {
    const { className } = props;
    const classes = useStyles(props);
const [anchorEl, setAnchorEl] = React.useState(null);

  const handleClick = event => {
    setAnchorEl(anchorEl ? null : event.currentTarget);
  };

  const open = Boolean(anchorEl);
  const id = open ? 'simple-popper' : undefined;

    const experience = useCallback((img, title) => (
      <div className="experience" aria-describedby={id} onClick={handleClick} onClick={() => setAnchorEl(!anchorEl)}>
        <img
          data-sizes="auto"
          className="lazyload"
          data-src={img}
          alt={title}
        />
        <div className="experience-title">
          <Typography
            color="textSecondary"
            variant="subtitle2"
            className="highlight highlight1"
            display="inline"
          >
            { title }
          </Typography>
        </div>
      </div>

    ), []);

    return (
      <div className={clsx(classes.root, className)}>
        <div className="experiences-column col1">
          {experience(gastronomia, 'GASTRONOMÍA')}
          {experience(giftcard, 'GIFT CARD')}
          {experience(deporte, 'DEPORTE')}
        </div>
        <div className="experiences-column col2">
          {experience(productos, 'PRODUCTOS')}
          {experience(diversion, 'DIVERSIÓN')}
          {experience(belleza, 'BELLEZA')}
        </div>
        <Popper id={id} open={open} anchorEl={anchorEl}>
          <div className={classes.paper}>
            <p>Array of images here depending on category </p>
          </div>
        </Popper>
      </div>
    );
  },
);

// Component proptypes.
Experiences.propTypes = propTypes;

// Component default props.
Experiences.defaultProps = defaultProps;

export default Experiences;

我完全不知道如何開始這項任務。 我是新來的反應

Answer 1

好的，所以

1. 從體驗中刪除體驗。

2. 添加對象數組 - 您的經驗

const iterateExperience = [ {img: gastronomia, title: 'GASTRONOMIA' }, {img: productos, title: 'PRODUCTOS' }, ];

3. 稍后像這樣映射它：

 <div className={clsx(classes.root, className)}> {iterateExperience.map((experience, index) => ( <div key = {index}> <Experience img = {experience.img} title = {experience.title}/> </div> ))} </div>

4. 創建子組件 - 經驗：

 const Experience = (props) => { const [clicked, setClicked] = useState(true) return ( <div onClick={() => setClicked(!clicked)} className={clicked ? 'experience' : 'experience-clicked'} > <img data-sizes="auto" className="lazyload" data-src={props.img} alt={props.title} /> <div className="experience-title"> <Typography color="textSecondary" variant="subtitle2" className="highlight highlight1" display="inline" > {props.title} </Typography> </div> </div> ); } export default Experience

---

如果您不想根據點擊呈現不同的組件，只需添加體驗（您也可以應用另一種樣式 - 無論您想要什么）

const Experience = (props) => {

  const [clicked, setClicked] = useState(true)

    return (
      <div onClick={() => setClicked(!clicked)}  className='experience'>

      {clicked ? 
      <div>
        <img
          data-sizes="auto"
          className="lazyload"
          data-src={props.img}
          alt={props.title}
        />

        <div className="experience-title">
          <Typography
            color="textSecondary"
            variant="subtitle2"
            className="highlight highlight1"
            display="inline"
          >
          {props.title}
          </Typography>
        </div>
        </div>
    : 
    <p>Another Component</p>}
    </div>
    );
  }