有沒有辦法在反應中將 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 暴露在外部，以便從外部更改此組件的 state？ 我知道這可以通過 redux 來完成。 但是不使用這個，有沒有辦法改變一個組件的state？

結構是這樣的

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 在這里呈現模態，並且它有一個按鈕來切換 state。 應該從下面使用相同的 state function

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

Answer 1

是的。

在這種情況下，您可以舉起 state 。 如果您不需要將 setState 向下傳遞到樹的下方，則此方法效果很好。

如果您不想將 setState function 一直傳遞到 React 元素樹，則需要使用context 、 redux 或其他一些 Z9ED39E2EA931586B6A985A6942EF573E 處理。

示例 state 升降機

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 組件的所有子組件都可以訪問 state 並對其進行修改。
（PS：你可以用帶有Redux等的HOC包裝App，這個例子只是為了可視化）