将状态数据传递给其他组件

Question

我目前有一个子组件 MoodCard，它正在父组件 MoodPage 中呈现。

我在父组件 const [isHover, setIsHover] = useState(false) 中有一个 State Hook，当 MoodCard 悬停在上面时，它会在 true 或 false 之间切换。

在 MoodCard 组件中，我有一个条件 {isHover && ( <div className="play-button-container"> <i className="fas fa-play"></i> </div>)}，如果 isHover 设置为 true，它会在 MoodCard 上显示一个图标。 p>

但是，我需要将此 isHover 传递给 MoodCard 组件，以便它在条件下工作。

我得到的错误是：'isHover' is not defined no-undef。我试过将它作为道具传递，但我认为我对如何做没有正确的想法。

旁注：我需要这成为每个呈现的 MoodCard 的单独行为。那么将这个逻辑放在映射的 MoodCard 组件实例中会更好吗？

这里是完整的代码：

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>
    </>
  );
}

Answer 1

您可以为每个card info 使用id，如下所示：

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
  },
];

那么不要将isHover 启用为布尔值，而是设置悬停项目的ID

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

最后，将其传递给子组件：

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

我不确定你想在子组件中做什么，但你可以将卡片 ID 与 hoverId 进行比较，如果它们相等，你可以做任何你想做的事情。 此外，没有任何条件的 useEffect 是不正确的，请改用它：

useEffect(() => {
    console.log(isHover);
  }, [hoverId]);

Answer 2

就这样吧：

<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>
  );
}