如何在反应中操纵子组件的父组件状态

Question

我正在尝试用 React 制作一个点击游戏。我有一个将硬币数量增加 1 的组件。但是，我希望能够将它发送到另一个组件以便可以使用它。示例：购买升级，减去金币数量。

我该怎么做？

Game.jsx

export default function Game() {
    // set state to bet that of the Counter when it is updated



    const element = (
        <div className="app">
            <Counter />
            <UpgradeMenu />
        </div>
    );
    return element;
}

Counter.jsx

export default function Counter() {
    const [count, setCount] = useState(0);

    const increment = () => {
        setCount(count + 1);
    };

    const element = (
        <div className="section">
            <div className="counter">
                <h1>{count} coins</h1>
                <button onClick={increment}>Click</button>
            </div>
        </div>
    );
    return element;
}

在此先感谢您，我希望这对我正在尝试做的事情有意义。

Answer 1

对于这种情况，我们可以将状态移动到父组件（Game 组件），然后 Counter 组件将接收 count 和 onClick props。

import { useState } from "react";

export default function Game() {
  const [count, setCount] = useState(0); // move the state here

  function handleClick() { // this function will be passed to Counter component
    setCount(count + 1);
  }

  const element = (
    <div className="app">
      <Counter count={count} onClick={handleClick} />
    </div>
  );
  return element;
}

export function Counter({ count, onClick }) {
  const element = (
    <div className="section">
      <div className="counter">
        <h1>{count} coins</h1>
        <button onClick={onClick}>Click</button>
      </div>
    </div>
  );
  return element;
}

检查这个工作示例：https://codesandbox.io/s/so-72469269-mehsdp?file=/src/App.js

这可以作为一个很好的参考：

https://beta.reactjs.org/learn/sharing-state-between-components

Answer 2

您可以将函数作为属性传递给 children 的元素，并运行传递给其中的函数。

Parent:

export function parentElement(){
  function myfunction() {return true}
    return(
      <chlidrenElement myFunction={myfunction}>
    )
  }
}

Children:

export function childrenElement({myFunction}){
  const hidden = myFunction();
  return(
    {
      hidden ?
      <chlidrenElement myFunction={myfunction}>
      : null
    }
  )
}

如何在反应中操纵子组件的父组件状态

How to manipulate state of parent component from child in react

javascript

reactjs