如何从子级到父级获取状态变量？

Question

index.js

import React from "react";
import Button from "./Button/Button"

export default function Index() {

  return (
    <>
    <Button />
    <div>Value of flag in Index.js = {}</div>
    </>
  );
}

Button.js

import React, { useState } from "react";
import "./button.css";

export default function Button(props) {
  const [flag, setFlag] = useState(true);
  const clickHandler = () => {
      setFlag(!flag);   
  };

  return (
      <div className="btn" onClick={clickHandler}>
        Value of flag in Button.js = {flag.toString()}
      </div>
  );
}

我的问题是“如何从Button.js到index.js获取标志值”？（儿童对父母）。

Answer 1

有两种类型的状态：

1. 所有人的全球状态

对于初学者，你必须遵守一些政策，不要尝试滥用状态，否则你会有一些麻烦。

对于全局状态，可以使用Redux、dva或umijs。

对于私人国家，你似乎已经知道了。

Answer 2

你可以通过方法发送一个值，参考这个：

index.js

import React from "react";
import Button from "./Button/Button"

export default function Index() {

  let getFlagValue = (flag) => {
    //here you'll get a flag value
    console.log(flag)
  }

  return (
    <>
    <Button sendFlagValue=(getFlagValue)/>
    <div>Value of flag in Index.js = {}</div>
    </>
  );
}

Button.js

import React, { useState } from "react";
import "./button.css";

export default function Button(sendFlagValue) {
  const [flag, setFlag] = useState(true);
  const clickHandler = () => {
      setFlag(!flag);   
      sendFlagValue(flag)
  };

  return (
      <div className="btn" onClick={clickHandler}>
        Value of flag in Button.js = {flag.toString()}
      </div>
  );
}

Answer 3

1）您可以在父组件中提升状态，并将状态和处理程序作为道具传递给子组件。

注意：这将起作用，因为您需要在JSX中使用标志，但是如果您将事件处理程序作为子组件中的道具传递，则必须调用处理程序以获取值。因此，要么解除状态，要么使用Redux

现场演示

一个pp.js

const App = () => {
    const [flag, setFlag] = useState( true );
    return (
        <>
            <Button flag={flag} setFlag={setFlag} />
            <div>Value of flag in Index.js = { flag.toString() }</div>
        </>
    );
};

Button.js

export default function Button({ flag, setFlag }) {
    
    const clickHandler = () => {
        setFlag(oldFlag => !oldFlag);
    };

    return (
        <div className="btn" onClick={clickHandler}>
            Value of flag in Button.js = {flag.toString()}
        </div>
    );
}

2） 您可以将处理程序作为道具传递到子组件中，如Harsh Patel答案所示

3） 您可以使用状态管理工具，即Redux。