如何解决有没有办法在反应中将 setState 导出到无状态组件之外?
考虑这个例子
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,这个例子只是为了可视化)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。