【问题标题】：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
这里怎么用？
stackoverflow.com/questions/37949981/… 请看这个链接。
This 可以帮忙，如果卡住我会添加解决方案

标签： javascript reactjs static stateless

【解决方案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

【讨论】：

示例：

&lt;App&gt;：

&lt;Modal&gt;：

`<App>`：

`<Modal>`：