是否有一种方法来导出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

可以。

在这种情况下可以解除状态。如果你不需要向下传递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>
);
}

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

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

WithRedux组件的所有子组件都可以访问状态并修改它。
(PS:你可以用HOC与redux等包装应用程序，这个例子只是为了可视化)