Saat ini saya memiliki komponen anak MoodCard yang sedang dirender dalam komponen induk MoodPage.

Saya memiliki Kait Negara di komponen induk const [isHover, setIsHover] = useState(false) yang beralih antara benar atau salah saat MoodCard diarahkan.

Dalam komponen MoodCard, saya memiliki {isHover && ( <div className="play-button-container"> <i className="fas fa-play"></i> </div>)} bersyarat yang seharusnya menampilkan ikon pada MoodCard jika isHover disetel ke true.

Namun saya harus meneruskan isHover ini ke komponen MoodCard agar berfungsi dalam kondisi.

Kesalahan yang saya dapatkan adalah: 'isHover' is not defined no-undef. Saya sudah mencoba meneruskannya sebagai alat peraga tetapi saya rasa saya tidak memiliki ide yang tepat tentang bagaimana melakukannya.

Sidenote: Saya ingin ini menjadi perilaku individual untuk setiap MoodCard yang dirender. Jadi, apakah lebih baik untuk menempatkan logika ini di instance komponen MoodCard yang dipetakan?

Ini kode lengkapnya:

MoodCard.js

import "./MoodCard.scss";
import MoodPage from "../pages/MoodPage";

export default function MoodCard(props) {
  return (
    <button
      className="mood-card"
      onClick={props.onClick}
      onMouseEnter={props.onMouseEnter}
      onMouseLeave={props.onMouseLeave}
    >
      <figure
        style={{ backgroundImage: `url('${props.backgroundImage}')` }}
      ></figure>
      <h1>{props.name}</h1>
      {isHover && (
        <div className="play-button-container">
          <i className="fas fa-play"></i>
        </div>
      )}
    </button>
  );
}

MoodPage.js


const MoodCardInfo = [
  {
    name: "Rain",
    image: "https://wallpaperaccess.com/full/164284.jpg",
    sound: rain,
  },

  {
    name: "Ocean Waves",
    image: "https://wallpapercave.com/wp/wp2544960.jpg",
    sound: ocean,
  },

  {
    name: "Thunder",
    image: "https://wallpapercave.com/wp/wp2544960.jpg",
    sound: "thunder",
  },
];

export default function MoodPage() {
  const [isHover, setIsHover] = useState(false);

  useEffect(() => {
    console.log(isHover);
  });

  return (
    <>
          <section className="mood-row">
            {MoodCardInfo.map((info) => (
              <>
                <MoodCard
                  name={info.name}
                  backgroundImage={info.image}
                  onClick={() => setCurrentSound(info.sound)}
                  onMouseEnter={() => setIsHover(true)}
                  onMouseLeave={() => setIsHover(false)}
                />
              </>
            ))}
          </section>
        </div>
      </div>
    </>
  );
}
1
OJM 22 September 2021, 05:19

2 jawaban

Jawaban Terbaik

Lakukan saja seperti ini:

<section className="mood-row">
            {MoodCardInfo.map((info) => (
              <>
                <MoodCard
                  name={info.name}
                  backgroundImage={info.image}
                  onClick={() => setCurrentSound(info.sound)}
                  onMouseEnter={() => setIsHover(true)}
                  onMouseLeave={() => setIsHover(false)}
                  isHover={isHover}
                />
              </>
            ))}
          </section>

////then you need to do this:

export default function MoodCard(props) {
  return (
    <button
      className="mood-card"
      onClick={props.onClick}
      onMouseEnter={props.onMouseEnter}
      onMouseLeave={props.onMouseLeave}
    >
      <figure
        style={{ backgroundImage: `url('${props.backgroundImage}')` }}
      ></figure>
      <h1>{props.name}</h1>
      {props.isHover && (
        <div className="play-button-container">
          <i className="fas fa-play"></i>
        </div>
      )}
    </button>
  );
}
1
Dawood Ahmad 22 September 2021, 04:48

Anda dapat menggunakan id untuk setiap card info sebagai berikut:

const MoodCardInfo = [
  {
    name: "Rain",
    image: "https://wallpaperaccess.com/full/164284.jpg",
    sound: rain, 
    id:0
  },

  {
    name: "Ocean Waves",
    image: "https://wallpapercave.com/wp/wp2544960.jpg",
    sound: ocean,
    id:1
  },

  {
    name: "Thunder",
    image: "https://wallpapercave.com/wp/wp2544960.jpg",
    sound: "thunder",
    id:2
  },
];

Lalu alih-alih mengaktifkan isHover sebagai boolean, setel id item yang dilayangkan

const [hoverId, setHoverId] = useState(-1);

Dan akhirnya, berikan ke komponen anak:

<MoodCard
                  name={info.name}
                  backgroundImage={info.image}
                  cardId={info.id}
                  hoverId = {hoverId}
                  onClick={() => setCurrentSound(info.sound)}
                  onMouseEnter={() => setHoverId(true)}
                  onMouseLeave={() => setHoverId(-1)}
                />

Saya tidak yakin apa yang ingin Anda lakukan di komponen anak, tetapi Anda dapat membandingkan id kartu dengan hoverId dan jika mereka sama, Anda dapat melakukan apa pun yang Anda inginkan. juga, memiliki useEffect tanpa kondisi apa pun tidak benar, gunakan ini sebagai gantinya:

useEffect(() => {
    console.log(isHover);
  }, [hoverId]);
0
Abbasihsn 22 September 2021, 02:34