我们可以在反应中访问无状态组件之外的功能吗？

Posted 2023-02-23

【中文标题】我们可以在反应中访问无状态组件之外的功能吗？

【英文标题】：Can we access functions outside of stateless component in react?

【发布时间】：2021-05-13 21:14:54

【问题描述】：

试图从外部调用模态函数，但不可能。使用静态方法和属性通过类组件实现，但 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>
  )

【问题讨论】：

这就是为什么会有像解决方案这样的状态管理。在您的情况下，您可以简单地使用 useContext

这里怎么用？

***.com/questions/37949981/… 请看这个链接。

This 可以帮忙，如果卡住我会添加解决方案

【参考方案1】：

你可以在父组件中声明 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

【讨论】：

感谢您的回复，但是有没有比这个更好的解决方案而不是道具？因为组件已经安装并且状态应该改变调用内部的函数

【参考方案2】：

您需要将"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 '...'

【讨论】：

还有很多状态设置，所以我应该调用一个函数，以便内部函数在没有redux的情况下更新本地状态

【参考方案3】：

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

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

并使用回调属性处理 resetState