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

Question

考虑这个例子

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}>)
}

Answer 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，这个例子只是为了可视化）