如何将状态从页面传递到组件并返回到页面? [英] How can I pass state from page to component and back to page?

问题描述

有没有一种不使用 Redux 的方法，我可以从我的 home.js 页面(我使用的是钩子而不是类)设置/使用状态，将它传递给我的组件 MyComponent.js 并且一旦在此组件内单击一个 div 更新状态(对于 home.js 页面也是如此)?

在 home.js 中，我有类似的东西:

导出默认函数 Page({ session, items }) {const [selectedTab, setSelectedTab] = useState('main')const handleSelect = (e) =>{setSelectedTab(e);}...//然后我返回一些 react-bootstrap 选项卡，其中 Tab.Container 就像:<Tab.Container id="tabs-home";activeKey={selectedTab} onSelect={(e) =>handleSelect(e)}>...}

在 MyComponent.js 中我尝试过:

导出默认函数 MyComponent(props) {const [selectedTab, setSelectedTab] = useState()const handleClick = () =>{setSelectedTab(第二个");}...//我返回如下内容:<div onClick={() =>handleClick()} style={{cursor: 'pointer'}}>blahblah</div>

所以基本上当单击组件内的项目时，我需要更改页面中的选定选项卡.然后，我还需要将组件中的 props 传递回页面，但是一旦我了解了如何传递状态，我想又是相同的过程

解决方案

这里是一个简短的片段，说明了在父级中保持状态并将控制权传递给子级的概念.

const App = () =>{const [state, setState] = React.useState('main');const handleState = (e) =>{控制台清除()；console.log(e.target);setState(e.target.id);}返回 (<div><Tab id="main" state={state} handleState={handleState}/><Tab id="second" state={state} handleState={handleState}/><Tab id="third" state={state} handleState={handleState}/>

)}const Tab = ({ id, state, handleState }) =>{返回 (<div id={id} className={state === id &&'active'} onClick={handleState}>{ID}

);}ReactDOM.render(<应用程序/>,document.getElementById("root"));

.active {背景色:番茄；}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script><div id="root"></div>

Is there a way without using Redux with which I can from my home.js page (I'm using hooks not classes) set/use a state, pass it to my component MyComponent.js and once a div is clicked inside this component update the state (so for the home.js page as well)?

In home.js I have something like:

export default function Page({ session, items }) {

  const [selectedTab, setSelectedTab] = useState('main')
  const handleSelect = (e) => {
    setSelectedTab(e);
  }

  ... // then I return some react-bootstrap tabs, where Tab.Container is like:

   <Tab.Container id="tabs-home" activeKey={selectedTab} onSelect={(e) => handleSelect(e)}>

   ...
}

In MyComponent.js I tried:

export default function MyComponent(props) {

  const [selectedTab, setSelectedTab] = useState()

  const handleClick = () => {
    setSelectedTab("second");
  }

  ... // and I return something like:

  <div onClick={() => handleClick()} style={{cursor: 'pointer'}}>blahblah</div>

So basically when clicking on the item inside the component I need to change selected tab in the page. I'll then need to pass props as well from the component back to the page, but once I understand how I can pass state I guess is the same process again

解决方案

Here is a quick snippet illustrating the concept of holding state in the parent and passing control to children.

const App = () => {
  const [state, setState] = React.useState('main');

  const handleState = (e) => {
    console.clear();
    console.log(e.target);
    setState(e.target.id);
  }

  return (
    <div>
      <Tab id="main" state={state} handleState={handleState} />
      <Tab id="second" state={state} handleState={handleState} />
      <Tab id="third" state={state} handleState={handleState} />
    </div>
  )
}

const Tab = ({ id, state, handleState }) => {

  return (
    <div id={id} className={state === id && 'active'} onClick={handleState}>
      {id}
    </div>
  );
}


ReactDOM.render(
  <App />,
  document.getElementById("root")
);

.active {
  background-color: tomato;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>

<div id="root"></div>

这篇关于如何将状态从页面传递到组件并返回到页面?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！