如何将函数作为属性从函数式父组件传递给子组件

Question

父组件：

const initialValue_modalProps = [
    { show: false, response: "" }
  ];
const [modalProps, setModalProps] = useState(initialValue_modalProps)
const passedFunction = () => {
    setModalProps(modalProps => initialValue_modalProps);
  }
..
..
 <div>
        <Modal show={modalProps.show}
          response={modalProps.response}
          passedFunction={passedFunction}></Modal>
 </div>

子组件：

export default function ModalComp(props) {
    const [modalOpen, setmodalOpen] = useState(true);
    console.log('modalOpen', modalOpen);
    if (props.show === false || modalOpen === false) {
        return null;
    }
    return (<Modal isOpen={props.show}>
        <ModalHeader>Deployment Status</ModalHeader>
        <ModalBody>{props.response}</ModalBody>
        <ModalFooter>
            <Button onClick={() => {
                setmodalOpen(modalOpen => false);
                props.passedFunction();
            }}>Close</Button>
        </ModalFooter>
    </Modal>)

}

我想把passedFunction函数从父组件传递给子组件，这样子组件就可以执行它来重置父组件的状态。

- Soumitra Bhattacharyya

Answer 1

您可以参考此处的实时演示示例https://codesandbox.io/s/modal-6fvyx

function App() {
  const [status, setStatus] = React.useState(false);
  const [text, setText] = React.useState("");

  const handleClick = () => {
   setStatus(prevStatus => !prevStatus);
  };
  const handleChange = e => {
   setText(e.target.value);
  };


  return (
    <>
      <button onClick={handleClick}>Open photo entry dialog</button>
      <ChildComponent
        isOpen={status}
        text={text}
        handleChange={handleChange}
        handleClick={handleClick}
      />
    </>
  );
}

const ChildComponent = ({ isOpen, text, handleChange, handleClick }) => {
  return (
    <>
      {isOpen && (
        <Model
          status={isOpen}
          handleClick={handleClick}
          text={text}
          handleChange={handleChange}
        />
      )}
    </>
  );
};

- akhtarvahid

---

如果你的目标是使用 Hook API，为什么不使用 setState 和 setText 来设置状态呢？你当前的状态设置方式看起来有些难看。 - Kluddizz

如果handleClick在一个名为'WorldMap'的组件类中，你会怎么处理？我已经尝试过WorldMap.handleClick、 ()=>WorldMap.handleClick，但都没有成功。谢谢。D. - v3nt

Answer 2

你需要删除 passedFunction 后面的括号，否则你会先执行该函数并将其结果传递给子组件。通过 passedFunction={passedFunction} 将你的函数原样传递。

const ParentComponent = () => {

  const initialModalProps = { ... };
  const [modalProps, setModalProps] = useState(initialModalProps);

  const passedFunction = () => {
    setModalProps(initialModalProps);
  }

  return (
    <div>
      <Modal
        show={modalProps.show}
        response={modalProps.response}
        passedFunction={passedFunction} />
    </div>
  );

};

- Kluddizz

---

你正在错误地使用状态的setter setModalProps。你将其设置为一个函数。尝试使用setModalProps(initialValue_modalProps)。 - Kluddizz

虽然我已经改成了你的语法，但我检查了两次。两个都可以工作。 - Soumitra Bhattacharyya

Answer 3

将子组件更改为此，它正在工作。

export default function ModalComp(props) {
    //const [modalOpen, setmodalOpen] = useState(true);
    if (props.show === false) {
        return null;
    }
    return (<Modal isOpen={props.show}>
        <ModalHeader>Deployment Status</ModalHeader>
        <ModalBody>{props.response}</ModalBody>
        <ModalFooter>
            <Button onClick={props.passedFunction}>Close</Button>
        </ModalFooter>
    </Modal>)

- Soumitra Bhattacharyya