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

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>)} 假设在 MoodCard 上显示一个图标isHover 设置为真。

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

我收到的错误是：'isHover' 未定义 no-undef。我试过将它作为 props 传递，但我认为我对如何传递没有正确的想法。

旁注：我需要这是每个呈现的 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>
  );
}

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

Passing State data to other component

javascript

state

reactjs

react-props

react-component