有没有办法在反应中将 setState 导出到无状态组件之外？

Posted 2023-02-23

【中文标题】有没有办法在反应中将 setState 导出到无状态组件之外？

【英文标题】：Is there a way to export setState outside stateless components in react?

【发布时间】：2021-05-20 14:32:45

【问题描述】：

考虑这个例子

export function InsideHoc(props)
   const [A, setA] = useState(false);

   return(if(A) && (<h1>Print something</h1>));

在另一个文件中

import A, setA from './inside-file';

function ToggleFromOutside()
   return(<p onClick=setA(!A)>Verify</p>);

是否可以将 setA 暴露在外部，以便从外部更改此组件的状态？我知道这可以通过 redux 来完成。但是不使用这个，有没有办法改变一个组件的状态？

结构是这样的

import withCreateHOC from './external';
import childComponent from './child';


class A extends React.Component 
   render()
      <Another menus=(item) => <MenuItems object=item />
       />
   


 export default withCreateHOC(A, custom: childComponent, title: 'Add');

//withCreateHOC 在这里渲染模态，并且它有一个按钮来切换状态。下面的函数应该使用相同的状态

function MenuItems()
   return(<button onClick=displayModal>)

【参考方案1】：

是的。

在这种情况下，您可以lift the state。如果您不需要将 setState 向下传递到树的下方，这会很好。

如果您不想将 setState 函数一直向下传递到 React 元素树，则需要使用 context、redux 或其他一些状态处理。

状态提升示例

export function Parent()
   const [message, setMessage] = useState("Hello World");

   return (
     <>
      <Child1 message=message />
      <Child2 changeMessage=setMessage />
     </>

   );


// Can be in other file
function Child1(props)
   return(<p>props.message</p>);


// Can be in other file
function Child2(props)

   return(
     <a onClick=() => props.changeMessage("Changed")>  
       I can change things in other components.
     </a>
   );

具有共享上下文/redux 的 React 树示例

<WithRedux>
  <App>
    <Navigation />
    <Modal />
    <PageRenderer />
    <SomeList>
      <ListItem />
      <ListItem />
    </Somelist>
  </App>
<WithRedux>

WithRedux 组件的所有子组件都可以访问状态并对其进行修改。 （PS：你可以用Redux等HOC封装App，这个例子只是为了可视化）

【讨论】：

很棒的尝试，但在我的情况下，child1 和 child2 不能在 Parent 组件中：) 它们位于不同的文件中。我只是想在没有父、子关系且不使用 redux 的情况下访问另一个组件的状态。通过上下文尝试可能是我正在寻找接受答案的解决方案:)

你的两个组件将如何构建，它们是否有共同的父级？在这种情况下，上下文也无济于事。因为上下文提供者需要成为两个组件的父级。

我认为只有 redux 可以解决我的问题

Redux 还需要一个共同的父级来包装你的商店。所有的解决方案都需要这个。唯一的区别是你的渲染树有多深，上下文和 redux 可以帮助你避免向下传递状态，一直向下传递函数。

那么这里可以把 redux 包装成 HOC 的 A 类吗？