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

编程问答 2022-05-25

问题描述

考虑这个例子

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

解决方法

是的。

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

如果您不想在 React 元素树中一直向下传递 setState 函数，则需要使用 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：你可以用 HOC withRedux 等包裹 App，这个例子只是为了可视化）

componentscomponentsjavascriptreactjsreactjsreactjsreactjsstateless