我们可以在 React 中访问无状态组件之外的函数吗？

如何解决我们可以在 React 中访问无状态组件之外的函数吗？

试图从外部调用模态函数，但不可能。使用静态方法和属性通过类组件实现，但 this 在那里不起作用。观察者提出了一些问题，最终登陆无状态组件。我们如何才能最好地完成这项工作？

//Inside
import Modal from './modal';
   // Not working
   <Button onClick={Modal.showModal}
<Modal />


//Outside

export const Modal = () => {
  const [visible,setVisible] = useState(false);

  const showModal = () => {
     setVisible(true);
  }
  return(
     <Dialog visible={visible}>Hello Test</h1>
  )
}

解决方法

您可以在父组件中声明 setVisible：

  const [visible,setVisible] = useState(true);

然后将 set 函数传递给 Modal：

 <Modal visible={visible} setVisible={setVisible} />

设置从外部可见：

  <button onClick={() => setVisible(!visible)}>Click</button>

示例：https://codesandbox.io/s/competent-bassi-x3dqd?file=/src/App.js:267-325

,

您将需要 "lift the state up" 到一个组件，该组件将状态和状态处理程序传递给他的孩子，或者使用带有 redux 或 context 的一些全局状态。

示例：

<App>：

import Modal from "./modal";
import { useState } from "react";

const [visible,setVisible] = useState(false);

const showModal = () => {
  setVisible(true);
};

return (
  <> 
    <Button onClick={showModal}> Hide Modal </Button>
    <Modal visible={visible} />
  </>
);

<Modal>：

export default const Modal = ({ visible }) => {
  return (
    <Dialog visible={visible}>
      <h1>Hello Test</h1>
    </Dialog>
  );
};

此外，仅使用 export 关键字，您只能从模块导入单个导出，因此您不能使用 默认导入 语法 import Modal from "..." 并且您将被要求导入 - import { Modal } from '...'

,

我在这里设法解决了 usingEffect，但不确定这是否适合我的实现。我正在尝试更新已安装组件的状态。

useEffect(() => {
    if (props.visible) {
      showModal();
    }
  },[props.visible]);

并使用回调道具处理 resetState